I have been trying to solve this issue wherein, I can grab the accessToken after login only? I have been stuck on this

The main problem is, the Token is already looking for it on localstorage, but I'm not even logged in yet. How can I make the user to login first before looking to the local storage

requestMethod.js

import axios from 'axios'

const BASE_URL = 'http://localhost:5000/api'

const TOKEN = JSON.parse(JSON.parse(localStorage.getItem('persist:root')).user)
  .currentUser.accessToken

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

export const userRequest = axios.create({
  baseURL: BASE_URL,
  headers: { token: `Bearer ${TOKEN}` },
})

Login.jsx

import { useEffect } from "react"
import { useState } from "react"
import { useDispatch } from "react-redux"
import { useHistory } from "react-router"
import { login } from "../../redux/apiCalls"
import { userRequest } from "../../requestMethod"

const Login = () => {
    let history = useHistory()
    const [username, setUsername] = useState("")
    const [password, setPassword] = useState("")
    const dispatch = useDispatch()
    const handleClick = (e) =>{
        e.preventDefault()
        login(dispatch,{username,password})      
        history.push('/home')
        
    }

    useEffect(() =>{
        try {
            
        } catch (error) {
            
        }
    },[])

    return (
        <div style={{display: 'flex', alignItems:"center", justifyContent:"center", height: '100vh', flexDirection: "column"}}>
            <form action="">
            <input style={{padding: 10, marginBottom:20}} value={username}  type="text" placeholder="username" onChange={e => setUsername(e.target.value)} />
            <input style={{padding: 10, marginBottom:20}} value={password} type="password" placeholder="password" onChange={e => setPassword(e.target.value)} />
            <button style={{padding: 10, width: 100}} onClick={handleClick}>Login</button>
            </form>

        </div>
    )
}

export default Login

apicalls.js

import { loginFailure, loginStart, loginSuccess } from './userRedux'

export const login = async (dispatch, user) => {
  dispatch(loginStart())
  try {
    const res = await publicRequest.post('/auth/login', user)
    const TOKEN = JSON.parse(
      JSON.parse(localStorage.getItem('persist:root')).user
    ).currentUser.accessToken
    dispatch(loginSuccess(res.data))
  } catch (error) {
    dispatch(loginFailure())
  }

}