Protect routes in react with server side rendering - node.js

Question

I have a react app and I serving it with Node js. I currently have a jwt token implemented in node js. So, when I login a token is sent back to the client and then stored in localstorage.
To verify that the user is logged in and has rights to access some of the pages. I will need to
Get the token from local storage
Check the expiry of the token. And if it is expired redirect them back to the login page.
I currently cannot get passed the 1st step
Here is what I have
private-route.js
function PrivateRoute({ component: Component, ...rest }) {
const [token, setToken] = useState();
useEffect(() => {
setToken(localStorage.getItem("usr-sess"));
console.log(token);
}, [token]);
return (
<Route
{...rest}
render={props =>
token ? (
<Component {...props} />
) : (
<Redirect to="/login" />
)
}
/>
);
}
export default PrivateRoute;
app.js
<Switch>
<Route exact path="/login" component={LoadableLogin} />
<PrivateRoute eexact path="/test" component={LoadableTestPage} />
<Route component={LoadableNotFound} />
</Switch>
server.tsx
const jsx = renderToString(
<ApolloProvider client={clientConfig}>
<Loadable.Capture report={moduleName => modules.push(moduleName)}>
<StaticRouter context={context} location={req.url}>
<App />
</StaticRouter>
</Loadable.Capture>
</ApolloProvider>
);
I constantly keep being redirected back to login even when the token is there.
The issue is that it takes a bit of time to setToken() and by then it will redirect me back to login. Is there any way to do this?
Not using useEffect and doing
localStorage.getItem("usr-sess") ? (
<Component {...props} />
) : (
<Redirect to="/login" />
)
throws a localStorage undefined error, I can't think of anything else to do.