firebase: Cannot assign to read only property 'displayName' of object '#<Object>'

import { getAuth, signInWithPopup, GoogleAuthProvider, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, onAuthStateChanged, updateProfile } from 'firebase/auth';
import { getDownloadURL, getStorage, ref, uploadBytes } from 'firebase/storage';
import { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import { useLocation, useNavigate } from 'react-router-dom';
import { setIsLoading } from '../features/isloadingSlice';
import { login, logout } from '../features/userSlice';
import initAuth from '../Firebase/initAuth';

initAuth();

export const useFirebase = () => {
    const auth = getAuth();
    const location = useLocation();
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const [updateCount, setUpdateCount] = useState(0);
    const storage = getStorage();
    const Redirect = () => {
        console.log(location);
        const destination = location?.state?.from?.pathname || '/';
        navigate(destination);
    }

    const uploadAvatar = async (file) => {
        const fileRef = ref(storage, 'avatar/' + auth?.currentUser?.uid + '.png');
        dispatch(setIsLoading(true));
        const snapshot = await uploadBytes(fileRef, file);
        const photoURL = await getDownloadURL(fileRef);
        updateProfile(auth.currentUser, { photoURL }).then(() => {
            setUpdateCount(updateCount + 1);
        }).catch(e => console.log(e.message))
        dispatch(setIsLoading(false));
        console.log(snapshot);
    }

    const userRegister = (name, photoURL, email, password) => {
        dispatch(setIsLoading(true));
        createUserWithEmailAndPassword(auth, email, password)
            .then(result => {
                updateProfile(auth.currentUser, {
                    displayName: name, photoURL
                }).then(() => { })
                dispatch(login({ displayName: name, email, photoURL }));
                Redirect();
            }).catch(error => alert(error.message))
            .finally(() => dispatch(setIsLoading(false)))
    }

    useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, (result) => {
            if (result) {
                dispatch(login({ ...result }))
            }
            else {
                dispatch(login({}))
            }
            dispatch(setIsLoading(false));
        })
        return () => unsubscribe;
    }, [updateCount, auth])

    return {
        logIn,
        logOut,
        Redirect,
        uploadAvatar,
        userRegister,
    }
}