Facing issue with setting up http only cookie while using react js for frontend and django rest framework for backend - reactjs

Question

I started building a basic Authentication system with JWT token authentication using rest API and react js. But, I was facing an issue while setting my cookie from the Django views sent using rest_framework.response.Response object. Now, the problem is that in the Django server the cookie is set, but in this case, while integrated with react js it fails. Django server is running on port 8000 and react js on 3000.
#api_view(['POST'])
def login(request):
try:
username = request.data['username']
password = request.data['password']
user = authenticate(request=request, username=username, password=password)
if user:
refresh = RefreshToken.for_user(user)
response = Response()
response.data = {
"status": True,
"Access": str(refresh.access_token)
}
response.set_cookie(key='refreshtoken', value=(refresh), httponly=True, samesite=None)
return response
else:
return Response(FALSE_RESPONSE)
except Exception as e:
print(e)
return Response(FALSE_RESPONSE)
This is the axios request, I was making from the frontend side.
axios({
method: "POST",
url: "http://localhost:8000/user-api/login/",
data: {
username:username,
password:password
},
credentials: 'include',
withCredentials: true
})
.then(response => {
console.log(response)
if(response.data['status']) {
setAccessToken(response.data['Access'])
setIsAuthenticated(true)
setLoginModal(false)
} else {
alert("Error! Credentials doesn't match.")
}
})
.catch(error => {
console.log(error)
})
This axios request generates no errors and I was successfully getting the token, but the refresh token was not getting saved in the cookies.
# settings.py
CORS_ALLOWED_ORIGINS = [
"http://localhost:3000",
"http://127.0.0.1:3000"
]
CORS_ALLOW_CREDENTIALS = True
Help me with this issue!!