I am using react-facebook package to show facebook chat button to one of my nextjs application. It was working fine. but suddenly last few days it’s not working as expected.

This is my code:

'use client'
import { FacebookProvider, CustomChat } from 'react-facebook';


  function FacebookChat({appId, pageId, themeColor}) {
    return (
      <FacebookProvider appId={appId} chatSupport>
        <CustomChat themeColor={themeColor} pageId={pageId} minimized={true}/>
      </FacebookProvider>  
    );
  }
  
  export default FacebookChat;

I followed these steps to setup facebook chat button:

1. Get Page ID: Go to your page -> About -> Page transparency and Copy the Page ID

2. Get APP ID: Go to https://developers.facebook.com -> My Apps -> Create App -> Select Other -> Next -> Select Consumer -> Give an app name -> Create App -> verify by fb password -> Go to App Settings -> Basic -> Fill up all info -> Turn on App Mode to live -> and Copy the App ID

3. Whitelist your domain: Go to https://www.facebook.com/settings/?tab=advanced_messaging -> Make sure you selected the page -> Add your domain to Whitelisted domains

If you know the problem and solution please help to resolve this.

Thanks in advance.