trigger fast refresh as function call (MapboxGL react native)

does anyone know how to trigger the equivalent of a fast refresh in react native as a function call? We tried to do that by changing state variables but it doesn't work.

Specifically, we want to rerender MarkerViews based on button clicks, but they currently don't show up in the right coordinates despite the coordinates in each MarkerView being correct. The only way we have been able to do so was when we edited part of the code and saved the edits, which triggers a fast refresh. However, we want to be able to do that every time we click the button. Thanks!

Below is the relevant code snippet:

  const [coordinates, setCoordinates] = useState([-87.6298, 41.8781]);
  const [androidPermissions, setAndroidPermissions] = useState(false);
  const [isFetchingAndroidPermission, setIsFetchingAndroidPermissions] = useState(IS_ANDROID);
  const [center] = useState([0, 0]);
  const ne = [51.69, 0.334];
  const sw = [51.28, -0.51];
  const [region, setRegion] = useState({});
  const [boundingBox, setBoundingBox] = useState({
    north: 6, east: -45, south: 0, west: -50,
  });
  const [pinData, setPinData] = useState<any[]>([]);

  const getBoundingBox = async () => region.properties.visibleBounds;

  const getLocations = async (box: any) => {
    const locations = await getAllLocationsWithin(box);
    return locations;
  };

  const getPostsWithLids = async (lids: any) => {
    const posts = await getPostByLid(lids);
    return posts;
  };

  const renderLoc = () => pinData.map((data) => (
    <MapboxGL.MarkerView
      key={data.coordinates[0]}
      id={data.locationName}
      coordinate={data.coordinates}
    >
      <View>
        <View style={styles.markerContainer}>
          <View style={styles.textContainer}>
            <Text
              numberOfLines={1}
              adjustsFontSizeToFit
              style={styles.text}
            >
              {data.locationName}
            </Text>
          </View>
          <Image
            source={require('./Map/location.png')}
            style={{
              width: 5,
              height: 8,
              backgroundColor: 'transparent',
              resizeMode: 'cover',
            }}
          />
        </View>
      </View>
    </MapboxGL.MarkerView>
  ));

  const getNewPins = async () => {
    // setRegion(c);
    const box = await getBoundingBox();
    setBoundingBox({
      north: box[0][1] + 0.15, east: box[0][0] + 0.15, south: box[1][1] + 0.15, west: box[1][0] + 0.15,
    });
    const { locations } = await getLocations(boundingBox);
    const lids = locations.map((loc: any) => loc.lid);
    const { posts } = await getPostsWithLids(lids);
    const groupedPosts = _.groupBy(posts, 'lid');
    const retObj = lids.map((lid: number) => {
      const post = groupedPosts[lid];
      const location = locations.find((loc: any) => loc.lid === lid);
      return {
        locationName: location.display_name,
        coordinates: [Number(location.longitude), Number(location.latitude)],
        posts: post,
      };
    });
    console.log(retObj);
    setPinData(retObj);
  };

  const handleRegionChange = (r: any) => {
    setRegion(r);
    // console.log(region);
    getNewPins();
  };

  return (
    <>
      <View style={styles.page}>
        <View style={styles.container}>
          <MapboxGL.MapView
            style={styles.map}
            onRegionDidChange={(regionObj) => {
              handleRegionChange(regionObj);
            }}
          >
            <TouchableOpacity style={styles.searchAreaBtn} onPress={() => renderLoc()}>
              <NooksText style={styles.searchAreaBtnText}>Search This Area</NooksText>
            </TouchableOpacity>

            <MapboxGL.Camera
              zoomLevel={4}
              centerCoordinate={center}
            />
            <View>
               {pinData.map((data) => (
                <MapboxGL.MarkerView
                  key={data.coordinates[0]}
                  id={data.locationName}
                  coordinate={data.coordinates}
                >
                  <View>
                    <View style={styles.markerContainer}>
                      <View style={styles.textContainer}>
                        <Text
                          numberOfLines={1}
                          adjustsFontSizeToFit
                          style={styles.text}
                        >
                          {data.locationName}
                        </Text>
                      </View>
                      <Image
                        source={require('./Map/location.png')}
                        style={{
                          width: 5,
                          height: 8,
                          backgroundColor: 'transparent',
                          resizeMode: 'cover',
                        }}
                      />
                    </View>
                  </View>
                </MapboxGL.MarkerView>
              ))}
              

            </View>
          </MapboxGL.MapView>
        </View>
      </View>
      <View>
        <Footer />
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  page: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  container: {
    height: '100%',
    width: '100%',
  },
  map: {
    flex: 1,
  },
  markerContainer: {
    alignItems: 'center',
    width: 60,
    backgroundColor: 'transparent',
    height: 70,
  },
  textContainer: {
    backgroundColor: 'white',
    borderRadius: 10,
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  },
  text: {
    textAlign: 'center',
    paddingHorizontal: 5,
    flex: 1,
  },
  searchAreaBtn: {
    borderColor: '#EEEEEE',
    width: 140,
    borderRadius: 5,
    borderWidth: 2,
    marginLeft: 150,
    backgroundColor: 'white',
  },
  searchAreaBtnText: {
    textAlign: 'center',
    color: 'black',
    fontSize: 12,
  },

});

export default MapPage;