Cannot update a component (`BrowserRouter`) while rendering a different component

Question

Warning: Cannot update a component (BrowserRouter) while rendering a different component (Register). To locate the bad setState() call inside Register, follow the stack trace as described in https://reactjs.org/link/setstate-in-render at Register (http://localhost:3000/main.7d7d42d….hot-update.js:47:164) at Routes (http://localhost:3000/static/js/bundle.js:75002:5) at div at div at App at Router (http://localhost:3000/static/js/bundle.js:74935:15) at BrowserRouter (http://localhost:3000/static/js/bundle.js:73745:5)

Register component:

const [createUserWithEmailAndPassword, user, loading, signupError,] = useCreateUserWithEmailAndPassword(auth, { sendEmailVerification: true });
    const [updateProfile, updating, updateError] = useUpdateProfile(auth);
    const [agree, setAgree] = useState(false);
    const [error, setError] = useState('');
    const location = useLocation();
    const from = location.state?.from?.pathname || '/';
    const navigate = useNavigate();
    if (user) {
        navigate('/');
    }
    if (loading || updating) {
        return <Loading></Loading>
    }