How to Resolve CSP Error with Paddle in a React Application? [closed]

I'm on react and when I try to open the paddle checkout, I get a response with this CORS error:

[Report Only] Refused to frame 'https://sandbox-buy.paddle.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors http://localhost".

POST 
net::ERR_BLOCKED_BY_CLIENT

this is my component

import React, { useState, useEffect } from 'react';
import { initializePaddle } from '@paddle/paddle-js';
export function Checkout() {
const [paddle, setPaddle] = useState();
useEffect(() => {
initializePaddle({
environment: 'sandbox',
token: 'test_*****************',
}).then((paddleInstance) => {
if (paddleInstance) {
setPaddle(paddleInstance);
}
});
}, []);
const openCheckout = () => {
paddle?.Checkout.open({
items: [{ priceId: 'pri_*****************', quantity: 1 }],
});
};
return (
<div>
<button onClick={openCheckout}>Open Checkout</button>
</div>
);
}

I followed the Paddle documentation, but nothing worked. I'm new to this, so I probably missed something.