Reactjs – Cannot destructure property 'displayName' of 'undefined' as it is undefined

I get this error when I want to register. "Cannot destructure property ‘displayName’ of ‘undefined’ as it is undefined." Also, when I change the order in the try block on authSlice.js, firebase does not accept it no matter what I write in the mail.

authService.js

import { auth } from "../../firebase/config";
import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";

const register = async (email, password, username) => {
  const userResponse = await createUserWithEmailAndPassword(
    auth,
    email,
    password
  );

  await updateProfile({
    displayName: username,
  });

  if (userResponse.user) {
    localStorage.setItem("user", JSON.stringify(userResponse.user));
  }
  return userResponse.user;
};

const authService = {
  register,
};

export default authService;

authSlice.js

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import authService from "./authService";

const user = JSON.parse(localStorage.getItem("user"));

const initialState = {
  user: user ? user : null,
  isError: false,
  isSuccess: false,
  isLoading: false,
  message: "",
};

export const authSlice = createSlice({
  name: "authSlice",
  initialState,
  reducers: {
    reset: (state) => {
      state.isLoading = false;
      state.isError = false;
      state.isSuccess = false;
      state.message = "";
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(register.pending, (state) => {
        state.isLoading = true;
      })
      .addCase(register.fulfilled, (state, action) => {
        state.isLoading = false;
        state.isSuccess = true;
        state.user = action.payload;
      })
      .addCase(register.rejected, (state, action) => {
        state.isLoading = false;
        state.isError = true;
        state.message = action.payload;
        state.user = null;
      });
  },
});

export const register = createAsyncThunk(
  "auth/register",
  async (user, thunkAPI) => {
    try {
      return await authService.register(
        user.email,
        user.password,
        user.username
      );
    } catch (error) {
      const message = error.message;
      return thunkAPI.rejectWithValue(message);
    }
  }
);

export const { reset } = authSlice.actions;
export default authSlice.reducer;

Register.js

import { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { register, reset } from "../features/auth/authSlice";
import { toast } from "react-toastify";
import Spinner from "../components/Spinner";

const Register = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const { user, isLoading, isError, isSuccess, message } = useSelector(
    (state) => state.auth
  );

  const [formData, setFormData] = useState({
    username: "",
    email: "",
    password: "",
    passwordCheck: "",
  });

  const { username, email, password, passwordCheck } = formData;

  const onChange = (e) => {
    setFormData((prevState) => ({
      ...prevState,
      [e.target.name]: e.target.value,
    }));
  };

  const onSubmit = (e) => {
    e.preventDefault();
    if (password !== passwordCheck) {
      toast.warning("Parolalar Eşleşmiyor!");
    } else {
      const userData = { username, email, password, passwordCheck };

      dispatch(register(userData));
    }
  };

  useEffect(() => {
    if (isError) {
      toast.warning(message);
    }
    if (isSuccess || user) {
      navigate("/");
    }
    dispatch(reset());
  }, [user, isError, isSuccess, message, navigate, dispatch]);

  if (isLoading) {
    return <Spinner />;
  }

  return (
    <>
      <div className="register">
        <h1>
          HangiGörev ile <span>İşlerinizi Kolaylaştırın</span>, Zamanınızı
          Verimli Kullanın!
        </h1>
        <p>
          Görevlerinizi düzenlemenin ve yönetmenin daha akıllıca bir yolunu
          keşfedin. HangiGörev ile işlerinizi kolaylaştırın, zamanınızı verimli
          kullanın ve başarıya giden yolda bir adım öne geçin.
        </p>
        <h4>Hemen Bugün Ücretsiz Kayıt Ol!</h4>
        <section className="form">
          <form onSubmit={onSubmit}>
            <div className="form-group">
              <input
                type="text"
                className="form-control"
                id="username"
                name="username"
                value={username}
                placeholder="Kullanıcı Adı"
                onChange={onChange}
                required
              />
            </div>
            <div className="form-group">
              <input
                type="email"
                className="form-control"
                id="email"
                name="email"
                value={email}
                placeholder="E-Posta Adresi"
                onChange={onChange}
                required
              />
            </div>
            <div className="form-group">
              <input
                type="password"
                className="form-control"
                id="password"
                name="password"
                value={password}
                placeholder="Parola"
                onChange={onChange}
                required
              />
            </div>
            <div className="form-group">
              <input
                type="password"
                className="form-control"
                id="passwordCheck"
                name="passwordCheck"
                value={passwordCheck}
                placeholder="Parola Tekrar"
                onChange={onChange}
                required
              />
            </div>
            <div className="form-group">
              <button type="submit" className="login-button">
                Kayıt ol
              </button>
            </div>
          </form>
        </section>
      </div>
    </>
  );
};

export default Register;

I defined a default value but it still does not work. How can I solve it in a different way? I am waiting for your help.