I'm getting this warning from ReactJS whenever I log in with social login. If I refresh the page, the warning goes away. I couldn't understand what it meant and didn't find any solution. How to fix this?

Here is the full warning

Warning: Cannot update a component (`BrowserRouter`) while rendering a different component (`Social`). To locate the bad setState() call inside `Social`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render
at Social (http://localhost:3000/static/js/bundle.js:3074:130)
at form
at div
at Login (http://localhost:3000/static/js/bundle.js:1613:78)
at Routes (http://localhost:3000/static/js/bundle.js:58827:5)
at div
at App
at Router (http://localhost:3000/static/js/bundle.js:58760:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:57569:5)

Social.js

const Social = () => {
const [signInWithGoogle, user, loading, error] = useSignInWithGoogle(auth);
const navigate = useNavigate();
const location = useLocation();

const from = location?.state?.from?.pathname || '/';


if (user) {
    navigate(from, { replace: true });
}

return (
    <div>
        <div className='flex items-center'>
            <hr className='border-black w-5/12' />
            <p className='w-2/12 text-center'>Or</p>
            <hr className='border-black w-5/12' />
        </div>
        <div className='mt-3'>
            <p onClick={() => signInWithGoogle()} className='flex cursor-pointer justify-center items-center mx-auto text-white bg-slate-800 hover:bg-slate-900 p-1 rounded-md'><img className='w-4 h-4 mr-1' src={googleLogo} alt="" />Continue with Google</p>
        </div>
    </div>
);

};