react toastify cannot reading content

Question

export const LoginForm = () => {
  const setIsLogin = useSetRecoilState(isLoginAtom);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const router = useRouter();
  const onValid = ({ email, password }: LoginProps) => {
    axios
      .post(`/api/auth/token`, {
        email,
        password,
      })
      .then((res) => {
        setIsSubmitting(true);
        setIsLogin(true);
        toast.success('Success Login!');
        router.push('/');
      })
      .catch((err) => {
        console.error(err);
        toast.error('Login Error');
      });
  };
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<LoginProps>();
  return (
    <>
      <form
        className="flex flex-col mx-auto justify-center items-start mt-10 "
        onSubmit={handleSubmit(onValid)}
      >
        //....
      </form>
    </>
  );
};

// _app.tsx

<div>
 <Component {...pageProps} />
 <ToastContainer
  theme="colored"
  autoClose={3000}
  position="top-center"
  />
</div>

I'm using nextjs 12 version.

The code above is part of the code for login. When I log in, I get the following error:

After logging out and logging back in, the error does not appear.

I read the related issue https://github.com/fkhadra/react-toastify/issues/858

That doesn't seem to help much.

Is the part declared in _app.tsx the problem?