Empty page render after client-side HOC run to check the JWT in next.js 13

Question

Im created a login system and i stored the created jwt token in the local storage.Now i need to check is that jwt token is valid or expired when other pages insted of login and sign up pages are loaded.

localStorage.setItem("token", res.data.token);

this is how is stored the jwt in local storage

this is isTokenvalid function to check the token

// utils/auth.js
import jwt from 'jsonwebtoken';

const isTokenValid = (token) => {
    try {
        const decoded = jwt.verify(token, "kdasdhuwncsda");
        console.log(decoded);
        return true;
    } catch (err) {
        console.log(err);
        return false;
    }
};

export default isTokenValid;

'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import isTokenValid from './isTokenValid';

// Main Higher Order Component
const WithAuth = ({ children }) => {
    const router = useRouter();  // Next.js router

    const [authenticated, setAuthenticated] = useState(false);

    // useEffect to check the validity of the access token when the component mounts
    useEffect(() => {
        const accessToken = localStorage.getItem('token');
        console.log('Access Token:', accessToken); // Add this line
        const isLoginPage = router.pathname === '/login';
        const isSignupPage = router.pathname === '/signup';

        if (isTokenValid(accessToken) && (isLoginPage || isSignupPage)) {
            
            setAuthenticated(true);
        } else {
            console.log("Token is not valid");
            router.push('/login');  

        }
    }, []); // Include router.pathname in the dependency array

    // Render the children if authenticated
    return authenticated ? <>{children}</> : null;
};

export default WithAuth;

This is the high order component i created and wrap around children it in the layout.js file

when this runs it redirect and says that jwt token is invalid and the redirected login page is empty and in console this error massage pops up

TypeError: Right-hand side of 'instanceof' is not an object
    at eval (verify.js:121:58)
    at getSecret (verify.js:98:14)
    at module.exports [as verify] (verify.js:102:10)
    at isTokenValid (isTokenValid.js:6:25)
    at eval (VM120751 withAuth.js:25:70)
    at commitHookEffectListMount (react-dom.development.js:20998:23)
    at invokePassiveEffectMountInDEV (react-dom.development.js:23877:13)
    at invokeEffectsInDev (react-dom.development.js:26666:9)
    at legacyCommitDoubleInvokeEffectsInDEV (react-dom.development.js:26649:5)
    at commitDoubleInvokeEffectsInDEV (react-dom.development.js:26630:7)
    at flushPassiveEffectsImpl (react-dom.development.js:26339:5)
    at flushPassiveEffects (react-dom.development.js:26263:14)
    at eval (react-dom.development.js:26000:9)
    at workLoop (scheduler.development.js:261:34)
    at flushWork (scheduler.development.js:230:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:534:21)