axios interceptor not updating my request for accessToken

Question

(This question is extremely similar, only it seems sessionStorage isnt being recognized until refresh.

I am using react to send login details to my backend api and redux-persist stores my response data within sessionStorage.

From the login response data recieved, an accessToken is delivered and sent to sessionStorage which is later used to verify and popoulate data on my site.

My issue is, how to get accessToken from sessionStorage to be sent alongside my axios request headers without having to refresh the page. Its seems react doesnt update or recognize new sessionStorage data until a refresh occurs so im unable to verify requests.

This is my requests handler file (requestmethods.js): UPDATED:

import axios from 'axios';

const BASE_URL = 'http://localhost:8080/api';


const TOKEN = JSON.parse(sessionStorage.getItem('persist:root'), (key, value)=>{
    try{
        return JSON.parse(value)
    } catch(err){
        return value
    }
})?.user.currentUser?.accessToken;


console.log(TOKEN)


//export const publicRequest = axios.create({
    //baseURL: BASE_URL,
//});

let userRequest = axios.create({
    baseURL: BASE_URL,
    timeout:5000,
    headers: { token: `Bearer ${TOKEN}`},

});

//interceptors added as suggested but made no difference
userRequest.interceptors.response.use(function (request){
  const token = JSON.parse(
    window.sessionStorage.getItem("persist:root"),
    (key, value) => {
      try {
        return JSON.parse(value);
      } catch (err) {
        return value;
      }
    }
  )?.user.currentUser?.accessToken;
  request.headers["token"] =  token ? `Bearer ${token}` : '';
  console.log(request);
  return request;
});

export default userRequest;

My backend request verifiers (middleweares.js):

const dotenv = require("dotenv").config();
const JWT = require("jsonwebtoken");
const JWT_SEC = process.env.JWT_SEC;

const verifyToken = (req, res, next)=>{
    //user token from login request
    const authHeader = req.headers.token;
    console.log('auth header: ', req.headers.token);
    //check token exists, (doesnt recognize until refresh)
    if(authHeader){
        const token = authHeader.split(" ")[1];
        //console.log(authHeader)
        JWT.verify(token, JWT_SEC, (err, user)=>{
            if(err) return res.status(403).json("Token is not valid");
            req.user = user;
            next();
        })
    } else {
        res.status(401).json("User not Authenticated.")
    }
}


const verifyTokenAndAdmin = (req, res, next)=>{
    verifyToken(req, res, ()=>{
        if( req.user.isAdmin ){
            next()
        } else {
            res.status(403).json("Unauthorized access.");
        }
    })
}

Intended results would have been that requests such as user './stats' below, automatically populates my home page once logged in and verified but instead im logged in to unpopulated page:

const router = require('express').Router();
const { verifyTokenAndAuthorization, verifyTokenAndAdmin, verifyToken } = require("../middlewares");
const User = require("../models/User");

router.get("/stats", verifyTokenAndAdmin, async (req, res)=>{
    const date = new Date();
    const lastYear = new Date(date.setFullYear(date.getFullYear() - 1));
    
    try{
        const data = await User.aggregate([
            {
              $match: { createdAt: { $gte: lastYear }}}, 
              {
                $project: {
                    month: { $month: "$createdAt"},
                },
               },
               { 
                    $group: {
                        _id: "$month",
                        total: { $sum: 1 },
                    },
                },
        ]);
        console.log(data);
        res.status(200).json(data);

    } catch (err){
        res.status(500).json(err);
    }
});

module.exports = router;