Typeform Integration Issue: “form.typeform.com refused to connect.” in React

I’ve integrated Typeform into my React application using the @typeform/embed-react package, but I’m encountering an issue. The error message I’m receiving is:

form.typeform.com refused to connect.

The browser’s network status console also shows:

(blocked:NotSameOriginAfterDefaultedToSameOriginByCoep)

What I’ve found out about this error: The NotSameOriginAfterDefaultedToSameOriginByCoep error typically indicates a Cross-Origin Embedder Policy (COEP) issue. It happens when the resource being requested does not have the proper headers to allow cross-origin resource sharing (CORS) and is therefore blocked by the browser’s security policies. This usually occurs when the resource does not explicitly grant permission for your site to embed it, due to differing origins.

Here is the relevant part of my React code:

import { Widget } from '@typeform/embed-react';

const Form = () => {
  return (
    <Widget
      className="my-form"
      id={form-id}
      style={{ width: '100%', height: '65vh' }}
    />
  );
};

export default Form;

This what I am seeing the web browser:

This is what we are seeing in Debugger:

Typeform Embed React Package Version: @typeform/embed-react v4.0.0

I’ve tried embedding the form using an iframe, but I still get the same error.

The browser’s network status console also shows:

(blocked:NotSameOriginAfterDefaultedToSameOriginByCoep)

I’ve tried checking the Typeform documentation and troubleshooting guides but haven’t found a solution yet. Has anyone encountered this issue before? How can I resolve this error and successfully integrate Typeform into my React app?

Any help would be greatly appreciated!