Reactjs – Login error InvalidTokenError: Invalid token specified: must be a string

I am currently a student working on my project and i am having a bit of trouble with my signin page.

when i attempt to sign in, I receive a `200 ok` message indicating that successful sign in to the back end (I checked the backend directly and this is the case). However i am not redirected to the "Home" page as intended. I initially did not receive any errors in my console which really confused my but after a bit of debugging and console.log statements i now get this error within my console.

Form submitted
Signin.jsx:35 Login successful {key: '53b53d027e69d35c0a03402c2f0b4bc0b932a50a'}
Signin.jsx:41 Login error InvalidTokenError: Invalid token specified: must be a string
    at jwtDecode (jwt-decode.js?v=699db677:38:11)
    at setTokenTimestamp (Utils.js:5:35)
    at handleSubmit (Signin.jsx:37:7)

I have tried to look on line and attempt to try fix it but i am getting no where and i am hoping that someone has came across this before and can help me get it fixed.

here is the code i currently have for my signin.jsx file

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { Form, Button } from "react-bootstrap";
import axios from "axios";
import { useSetCurrentUser } from "../contexts/CurrentUserContext";
import { setTokenTimestamp } from "../utils/Utils";
function SignIn() {
  const setCurrentUser = useSetCurrentUser();
  const [signInData, setSignInData] = useState({
    username: '',
    password: ''
  });
  const { username, password } = signInData;
  const navigate = useNavigate();
  const [errors, setErrors] = useState({});
  const handleChange = (event) => {
    setSignInData({
      ...signInData,
      [event.target.name]: event.target.value,
    });
  };
  const handleSubmit = async (event) => {
    event.preventDefault();
    console.log('Form submitted'); // Log form submission
    try {
      const { data } = await axios.post('/dj-rest-auth/login/', signInData);
      console.log('Login successful', data); // Log successful login
      setCurrentUser(data.user);
      setTokenTimestamp(data); // Ensure the correct token is passed
      console.log('Navigating to /home');
      navigate('/home'); // Corrected navigation method
    } catch (err) {
      console.log('Login error', err); // Log any errors
      setErrors(err.response?.data);
    }
  };
  return (
    <div>
      <h1>Sign into your account</h1>
      <Form onSubmit={handleSubmit} >
        <Form.Group controlId="username">
          <Form.Label>Username:</Form.Label>
          <Form.Control
            type="text"
            placeholder="Enter your username"
            name="username"
            value={username}
            onChange={handleChange}
          />
        </Form.Group>
        <Form.Group controlId="password">
          <Form.Label>Password:</Form.Label>
          <Form.Control
            type="password"
            placeholder="Password"
            name="password"
            value={password}
            onChange={handleChange}
          />
        </Form.Group>
          <Button type="submit" onSubmit={handleSubmit}>
          SignIn
        </Button>
      </Form>
    </div>
  );
}
export default SignIn;

and here is my utils.js code

// The code in this file was copied from the 'Moments' walkthrough project.
import {jwtDecode} from "jwt-decode";
export const setTokenTimestamp = (data) => {
    const refreshTokenTimestamp = jwtDecode(data?.refresh_token).exp
    localStorage.setItem("refreshTokenTimestamp", refreshTokenTimestamp)
};
export const shouldRefreshToken = () => {
    return !!localStorage.getItem('refreshTokenTimestamp')
};
export const removeTokenTimestamp = () => {
    localStorage.removeItem('refreshTokenTimestamp')
};

Please note that i am using react-router V6 which replaced the useHistory hook with useNavigate.
Thank you so much in advance

I have tried a few online suggestions but i think i am looking in the wrong places