removing loop error caused by mapRef in OpenStreetMap

src/app/components/map/OpenStreetMap.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { View, Linking } from "react-native";
 import WebView from "react-native-webview";
 import {
@@ -46,7 +46,7 @@ export default function OpenStreetMap({
   setDataOptionsToShow,
   isForm = false,
 }) {
-  const [mapRef, setMapRef] = useState(null);
+  const mapRef = useRef(null)
   const webviewContent = html_content;
   const [markerListener, setMarkerListener] = useState(null);
 
@@ -59,15 +59,15 @@ export default function OpenStreetMap({
   });
 
   useEffect(() => {
-    if (markersList && mapRef) {
-      deleteAllMarkers(mapRef);
+    if (markersList && mapRef.current) {
+      deleteAllMarkers(mapRef.current);
 
       notEmpy(markersList) &&
         markersList.forEach((val) => {
           if (val.name == "susceptibilityAreas") {
-            insertPolygon(mapRef, val.ID, val.coordinate);
+            insertPolygon(mapRef.current, val.ID, val.coordinate);
           } else {
-            insertMarker(mapRef, val.ID, val.coordinate, val.image);
+            insertMarker(mapRef.current, val.ID, val.coordinate, val.image);
           }
         });
     }
@@ -77,9 +77,7 @@ export default function OpenStreetMap({
     <View flex={1}>
       {webviewContent && (
         <WebView
-          ref={(webViewRef) => {
-            setMapRef(webViewRef);
-          }}
+          ref={mapRef}
           onMessage={(event) => {
             bindEventsToListeners(
               handleEvent(event),