Once this injectJavaScript is loaded at the first time, the second time I pass a new location to load in the WebView, it still loads the first location loaded on the WebView.

  const [injectJavaScript, setInjectJavaScript] = useState('');
 useEffect(() => {
    console.log("Effect triggered");

   
    if(isFocused)
      {  const newInjectJavaScript  = `
      // Define the createPins function
      function createPins(locs) {
        locs.forEach(function(location) {
          var pin = new mapkit.MarkerAnnotation(new mapkit.Coordinate(location.lat, location.long), { title: location.title,  glyphImage: {1: 'https://cdn-icons-png.flaticon.com/128/9001/9001771.png'} });
          pin.data = {address: location.address, storeName: location.title}
          map.addAnnotation(pin);
        });
      }

      // Define the setInitialRegion function
      function setInitialRegion(coordinate) {
        var japanCenter = new mapkit.Coordinate(coordinate.lat, coordinate.long);
        var japanSpan = new mapkit.CoordinateSpan(0.05, 0.05);
        var japanRegion = new mapkit.CoordinateRegion(japanCenter, japanSpan);
        map.region = japanRegion;
      }

      // Call the functions if needed
      createPins(${JSON.stringify(pinLocations)});
      
      if (${
        currentLocation && currentLocation?.latitude && currentLocation?.longitude
      }) {
        setInitialRegion({ lat: ${currentLocation?.latitude}, long: ${
        currentLocation?.longitude
      } });
      } else {
        setInitialRegion({ lat: 35.6895, long: 139.6917 }); // Default to Tokyo
      }
    `;

    console.log("new current loc", currentLocation)

    // Inject JavaScript
    // Assuming webViewRef is the ref to your WebView component
    setInjectJavaScript(newInjectJavaScript);}


}, [currentLocation?.latitude, currentLocation?.longitude, isFocused]);

here is the code for the WebView

 <WebView
            className="h-full"
            originWhitelist={["*"]}
            source={{
              uri: "http://poke-rate-admin.site/api/get-html",
              headers: {
                Authorization: `Basic ${encodedCredentials}`,
              },
            }}
            javaScriptEnabled={true}
            allowFileAccess={true}
            injectedJavaScript={injectJavaScript}
            allowUniversalAccessFromFileURLs={true}
            onMessage={(event) => {
              const data = JSON.parse(event.nativeEvent.data);
              setStoreData(data);
              setIsStoreVisible(true);
              showBottomSheet();
            }}
            mixedContentMode="compatibility"
            cacheEnabled={false} 
          />
        </View>

How do I fix this so that I can reload new location?

I tried declaring the injectJavascript and updating each time it loads. The value of currentLocation changes though but it doesn’t change in the WebView.