I am new to ReactJS. On Initial Load of Page, I want to check if the state is null, then I want to redirect to another login Page

Here's the Component Code:

export default function Addblousesalwar() {
  const navigate = useNavigate();
  const { state } = useLocation();
  console.log(state)   //null
  if(state === null || state === undefined){
    navigate("/login")
  }

But It shows error:

You should call navigate() in a React.useEffect(), not when your component is first rendered. I tried via useEffect also. But the useEffect doesn't get executed.

useEffect(() => {
    if(state === null || state === undefined){
      navigate("/login")
    }
  }, []);



useEffect(() => {
    if(state === null || state === undefined){
      navigate("/login")
    }
  }, []);

I tried this also

 useEffect(() => {
    if(state === null || state === undefined){
      navigate("/login")
    }
  }, [state]);

This useeffect also not triggering Please Help me with some solutions