Cannot display Facebook Messenger on my React website

Question

I want to add a Facebook Messenger on my React website. I am using a package called react-messenger-customer-chat to achieve this.

This is the piece of code that I've added -

<MessengerCustomerChat
   pageID="1045738xxxxxxx"
   appID="14954381xxxxxxx"
/>

I host it on a https server for it to work. Then I added the domain to Whitelisted Domains on my Facebook page settings as required. But I get this error in the console -

Refused to display 'https://www.facebook.com/' in a frame because it set 'X-Frame-Options' to 'deny'.

Any idea why it can't display the messenger and how can I overcome this error? Thanks in advance.