useEffect hook for login via local storage

I'm creating a React + Next.js app with authorisation and I need to get token from local storage. If I do this without useEffect, there is an error of undefined localstorage, but with use effect my redirects don't work, maybe you know where am I wrong?

"use client";
//modules
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
//styles
import styles from "./page.module.sass";
//components
import NewCV from "./components/newCv";
import Cvs from "./components/cvs";
import PersonalInfo from "./components/personalInfo";
import LayoutPicker from "./components/LayoutPicker";
//helpers
import { vaildToken } from "@/app/authorization";
export default function MyPage() {
const router = useRouter();
const [catType, setCatType] = useState(0);
const cat = (type) => setCatType(type);
const [valid, setValid] = useState(false);
const [role, setRole] = useState('')
useEffect(() => {
const res = vaildToken(localStorage.getItem("token"));
setValid(res[0]);
setRole(res[1]);
if (valid !== true && role !== "USER") {
router.push("/login");
}
}, [valid, role]);
console.log(valid, role)
return (
<main className={styles.main}>
{valid !== true && role !== "USER" ? (
<div className={styles.container}>
<LayoutPicker cat={cat} />
{catType == 1 ? <Cvs /> : catType == 2 ? <NewCV /> : <PersonalInfo />}
</div>
) : (
<></>
)}
</main>
);
}

Change the condition as follows cause you won't get the state value immediately.

if (res[0] !== true && res[1] !== "USER") {
router.push("/login");
}

Hope, it'll work.