React Native WebView onMessage() is not triggered

I have a static site hosted on S3 with CloudFront distro on top of it.

<WebView  ref={webViewRef}  scrollEnabled={false}  source={{ uri: Config.REMOTE_URL }} // CloudFront URL  sharedCookiesEnabled={true}  onMessage={(event) => receivedMessageFromWebView(event.nativeEvent.data)}/>

And the way we postMessage() to the web is something like this

const sendDataToWebView = (dataMap: any) => {  const dataToPost = { type: 'data', data: dataMap };  const postMessageJSCode = `    window.postMessage(${JSON.stringify(dataToPost)}, "*");    true;  `;  if (webViewRef && webViewRef.current) {    webViewRef.current.injectJavaScript(postMessageJSCode);  }}

And the onMessage implementation as follows

const receivedMessageFromWebView = (msgData: any) => {  console.log('Data Received from WebView -->', msgData); // <-- Not working};

What am I missing here?

• React: 17.0.2
• ReactNative: 0.64.2
• WebView: 11.6.5