How to access profile API from the frontend. User is logged in from the backend but Django does not recognise log in from react frontend

Question

I have created an Api using django rest framework (localhost/users/profile) that gets the user's details if they are logged in. It works perfectly when I call the API in the backend when user is logged in the backend.

enter image description here

But when I try to access the same API from my React front end, it doesnt work.

I think the problem would be that cookies are not stored when a request is made from the backend. But I dont know how to solve it.

import React, { useEffect, useState } from "react"
import AuthContext from '../context/AuthContext'
import {Link} from 'react-router-dom'

const ProfilePage = () => {
    const [profiles, setProfiles] = useState([])
  
    const fetchData = async () => {
      const response = await fetch("http://127.0.0.1:8000/users/profile")
      const data = await response.json()
      setProfiles(data)
      console.log(data)
    }

  
    useEffect(() => {
      fetchData()
    }, [])
    
  
    return (
      <div>
        {profiles.length > 0 && (
          <ul>
            {profiles.map(profile => (
              <li key={profile.id}>{profile.name}</li>
            ))}
          </ul>
        )}
      </div>
    )
  }
  

export default ProfilePage

error from console enter image description here

error from Backend server enter image description here