Error When Adding Facebook Messenger Plugin: Content Security Policy Directive Violation next js app

I am integrating the Facebook Messenger plugin into my website, but I encounter an error related to Content Security Policy (CSP). When I add the code snippet for the plugin, the following error message appears:

  • Refused to frame ‘https://www.facebook.com/’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors https://www.facebook.com”.

I have verified that the page ID is correct and the Facebook page is live. Here are the steps I’ve taken so far:

Checked the Facebook page ID to ensure it’s correct.
Verified that the Facebook page is publicly accessible and live.
Added the plugin code snippet as instructed in the Facebook documentation.
Despite these steps, the issue persists. Here is the snippet of code where I’m adding the plugin (excluding any sensitive information):enter image description here