Issues with Cloudfront Signed Cookies in my Video Streaming App

I'm developing a learning management system using Django and React where I want to restrict video content to only users enrolled in specific courses. I'm attempting to implement Cloudfront signed cookies, but I'm running into a problem. When I request video content from Cloudfront using React (with Video.js for adaptive bitrate streaming), it seems that the cookies aren't being sent at all. I keep getting this error:
`MissingKeyMissing Key-Pair-Id query parameter or cookie value`.

Here's how I'm setting the cookies on the Django backend:
```
response.set_cookie('CloudFront-Policy', cookie_dict['CloudFront-Policy'], path='/', samesite='None', httponly=True, secure=True)
response.set_cookie('CloudFront-Signature', cookie_dict['CloudFront-Signature'], path='/', samesite='None', httponly=True, secure=True)
response.set_cookie('CloudFront-Key-Pair-Id', cookie_dict['CloudFront-Key-Pair-Id'], path='/', samesite='None', httponly=True, secure=True)
```

And this is the React code that sends the request:
```
useEffect(() => {
if (!playerRef.current) {
playerRef.current = videojs(videoRef.current, {..., html5: {withCredentials: true}});
}
}, [src]);
```

The functionality works fine when there are no content restrictions. Any help would be appreciated!