I would like to update an existing Django profile but getting the error message:

PUT http://127.0.0.1:8000/update_profile/ 401 (Unauthorized)

The specific network error I am getting is:

detail: "Authentication credentials were not provided."

This is what the event listener triggered when my update profile button is clicked:

const handleSubmit = e => {
            e.preventDefault();
            console.log('handle submit',profileUser)
            const updatedProfileInfo = {
                username: profileUser.username,
                email: profileUser.email,
                first_name: profileUser.first_name,
                last_name: profileUser.last_name,
                city: profileUser.city,
                country: profileUser.country
            }
            console.log(updateProfile)
            updateProfile(updatedProfileInfo);
    }

updateProfile is destructured from useContext here:

let { user,logOutUser, updateProfile } = useContext(AuthContext)

here is the updateProfile function:

const updateProfile = (userData) => {
    axios
        .put('http://127.0.0.1:8000/update_profile/', {
            headers: {
                Authorization: "Bearer" + window.localStorage.getItem('authTokens').access,
                'Accept' : 'application/json',
                'Content-Type': 'application/json'
            },
            body: userData
            })
        .then(res => {
            console.log(res)
        })
}

I pass updateProfile to my Profile through ContextData:

let contextData = {
        user:user,
        loginUser:loginUser,
        logOutUser:logOutUser,
        updateToken: updateToken,
        updateProfile: updateProfile
    }
...
return(
        <AuthContext.Provider value={contextData} >
            {children}
        </AuthContext.Provider>
    )

This is how my access token is stored in localStorage authTokens: {"access":****,"refresh":*****}