React component does not update JWT cookie details on url change until manually refresh

Question

I have implemented ProtecedRoute to allow the users to access the URLs only when there is a valid JWT lies in the cookie. Good case scenarios work fine, but when I manually delete the JWT from the cookie or the cookie expires automatically, and I change the routes, the react app is holding the JWT in some cache or some memory until I manually refresh the page. So I can still use the app and navigate to different pages until refresh. Does anyone know why is this happening?

const ProtectedRoute = ({ exact = false, path, children }) => {
  const [cookies] = useCookies(['ReactToken'])
  const { ReactToken } = cookies
  const {
    decodedToken,
  }: {
    decodedToken: IReactToken | null
  } = useJwt(ReactToken)
  const { apiToken } = useContext(AuthContext)


  useEffect(() => {
      // The below line is not working immediately upon a path change. 
      // The apiToken still holds the old value until refresh
      if(!apiToken) // navigate to login page
  }, [path, children, apiToken])

  return (
    <Route exact={exact} path={path}>
      {children}
    </Route>
  )
}