Intersection Observer API not working in ios device when opening a webview in it but working perfectly in web, android , safari browser

`Below mentioned is my code for intersection observer

useIntersectionObserver

/* eslint-disable @typescript-eslint/no-shadow */import { RefObject, useEffect, useState } from 'react';export default function useIntersectionObserver(  elementRef: RefObject<Element>,  { threshold = 0, root = null, rootMargin = '0%' }) {  const [entry, setEntry] = useState<IntersectionObserverEntry>();  const callBackFunction = ([entry]: IntersectionObserverEntry[]): void => {    setEntry(entry);  };  useEffect(() => {    const node = elementRef?.current; // DOM Ref    const isIOSupported = !!window.IntersectionObserver;    if (!isIOSupported || !node) return;    const observerOptions = { threshold, root, rootMargin };    const observer = new IntersectionObserver(      callBackFunction,      observerOptions    );    observer.observe(node);    return () => observer.disconnect();`your text`  }, [elementRef, JSON.stringify(threshold), root, rootMargin]);  return entry;}

Below is the code mentioned where I am calling useInterSectionObserver hook

const scrollDivElementRef = useRef<null | HTMLDivElement>(null);const chatDivRef = useRef<null | HTMLDivElement>(null);const entry = useIntersectionObserver(scrollDivElementRef, {});const isVisible = !!entry?.isIntersecting;

Here scrollDivElementRef is the ref of div which we are observing for the intersection.It is basically our sentinal element.

Below mentioned is the useEffect hook which is going to perform some action when isVisible will become true.

Below mentioned is a code in react-native webview ,basically we are opening our react web app inside ios app , but our intersection observer is not able to detect changes . We have implemented intersection observer for infinite loading of messages. Every time user will scroll upwards , we will get "isVisible" as true and we will make an API call to fetch more messages.

  useEffect(() => {    if (isVisible) {      dispatch(        getPostsForChannel(inputChannelId, true, channelMessages[0].timestamp)      );    }  }, [isVisible]);

<View style={styles.container}><WebView          style={{ marginTop: 40 }}          //TODO: Update the url          source={{ uri: 'http://192.168.1.2:3000' }}          onLoad={(syntheticEvent) => {            const { nativeEvent } = syntheticEvent;          }}          javaScriptEnabled={true}          onError={(e) => {            const { nativeEvent } = e;            setUrl(HOME_URL);          }}          onHttpError={() => {            setUrl(HOME_URL);          }}          onMessage={onMessage}          limitsNavigationsToAppBoundDomains={true}          // injectedJavaScript="window.octNativeApp=true"          injectedJavaScriptBeforeContentLoaded={initializeNativeApp}          scalesPageToFit={false}          setBuiltInZoomControls={false}          useWebView2          allowsInlineMediaPlayback={true}          mediaPlaybackRequiresUserAction={false}></WebView></View>`

It will be really very helpful , if you people can help me with this problem.

Thanks & RegardsMohit

I tried giving the height & width to the webview but it is also not working.Tried almost every piece of advise available in other platforms but not able to fic this`