How can I fix this error? : Cannot update a component while rendering a different component

[hopoduck]

While configuring a React web app, I wrote a component that checks a status value and sends a user who is not logged in to the login page.

However, when I call toast.error inside the useEffect while navigating to it, I get the error below.

Warning: Cannot update a component (`Ie`) while rendering a different component (`ProtectedRouter`). To locate the bad setState() call inside `ProtectedRouter`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

This is my code.

import toast from "react-hot-toast";
import { Navigate, Outlet } from "react-router-dom";
import { ROUTES } from "../constants";
import { useStore } from "../store";

export default function ProtectedRouter() {
  const user = useStore((state) => state.user);
  if (!user) {
    toast.error("로그인이 필요한 페이지입니다.");
    return <Navigate to={ROUTES.SIGN_IN} replace />;
  }

  return <Outlet />;
}

and router

const router = createBrowserRouter([
  {
    path: ROUTES.HOME,
    element: <BaseLayout />, // I placed the Toaster component here.
    children: [
      {
        path: "",
        element: <Home />,
      },
      {
        path: "",
        element: <DefaultLayout />,
        children: [
          { path: ROUTES.SIGN_UP, element: <SignUp /> },
          { path: ROUTES.SIGN_IN, element: <SignIn /> },
          { path: ROUTES.LOGOUT, element: <Logout /> },
          {
            path: "",
            element: <ProtectedRouter />, // Call toast.error from here.
            children: [
              { path: ROUTES.FRIENDS, element: <Friends /> },
              { path: ROUTES.CHAT_ROOMS, element: <ChatRooms /> },
              {
                path: ROUTES.MESSENGER + "/:chatroomId",
                element: <Messenger />,
              },
            ],
          },
        ],
      },
    ],
  },
  {
    path: "*",
    element: <NotFound />,
  },
]);

Thank you for all your help.