Why is it not loaded at first and then after a second the data is loaded from the server?

Question

React

// Код который берет данные человека которые зашел и который должен отображать его данные
export const useAuth = () => {
    const [user, setUser] = useState({})
    const [session, setSession] = useState({})

    async function fetchAuth() {
        await fetch(`http://localhost:3000/auth/login`)
            .then((res) => res.json())
            .then((res) => {
                setUser(res.user)
                setSession(res.session)
            })
            .catch((e) => console.log(e));
    }

    useEffect(() => {
        fetchAuth()
    }, [])

    if (user) {
        return {
            login: user.login,
            name: user.name,
            surname: user.surname,
            defaultPhoto: user.defaultPhoto,
            verification: user.verification,
            id: user._id,
            session: session
        }
    }

    return false
}

// Это код которые принимает данные того кто зашел через пропс и выводит их 
export const ButtonProfile = (props) => {
    const [active, setActive] = useState(false)

    const logoutHandler = () => {
        fetch('http://localhost:3000/auth/logout')
            .then(res => res.json())
            .catch(e => console.log(e))
    }

    return (
        <div className={active ? "nav-button dark active" : "nav-button dark"}>
            <img src={props.user.defaultPhoto} alt="" className="nav-photo" onClick={() => setActive(!active)}/>
            <>
                <a href="/profile" className={active ? "nav-button__link dark active": "nav-button__link dark"}>
                    <img src={profile} alt=""/>
                </a>
                <a href="/setting" className={active ? "nav-button__link dark active": "nav-button__link dark"}>
                    <img src={settings} alt=""/>
                </a>
                <a href="/logout" className={active ? "nav-button__link dark active": "nav-button__link dark"}>
                    <img src={logout} alt="" onClick={logoutHandler}/>
                </a>
            </>
        </div>
    )
}

First, a white square appears near the photo, and then it is normally displayed. Can this be fixed somehow?