I am not able to place marker according to search

Question

I am trying to place marker on searched area in my project. Currently it has been placed to a fixed coordinate by default when data is fetched through API. Listing co-ordinates in API are also fetched properly but when I searched for a listing on the basis of area data is filtered properly but marker does not move, any solution to the problem?

import {  Carousal, Heading, Input, List, Map, Image } from '../components';
import axios from 'axios';

export const NearMe = () => {

  const [responseData, setResponseData] = useState(undefined);
  const [searchData, setSearchData] = useState([]);
  const [search, setSearch] = useState('');
  const [markerCoordinate, setMarkerCoordinate] = useState([]);


  const getAPIData = async () => {
    try {
      const url = "https://903f-202-47-60-211.ngrok-free.app/listing";
      let result = await fetch(url);
      result = await result.json();
      return result;
    } catch (error) {
      console.log(`error`)
      console.error(error)
    }
  }
  useState(async () => {
    // const data = await getAPIData();
    // setData(data);
    try {
      const url = "https://97cf-119-157-85-150.ngrok-free.app/listing";
      let result = await fetch(url);
      result = await result.json();
      setResponseData(result.data);
      setSearchData(result.data);
    } catch (error) {
      console.log(`error`)
      console.error(error)
    }
  })

  console.log(responseData)

  const onSearch = (text) => {
    setSearch(text);
    const filteredData = responseData.filter((item) =>
      item.listing_area.toUpperCase().includes(text.toUpperCase())
    );
    setSearchData(filteredData);
    console.log(filteredData);
    if (filteredData.length > 0) {
      setMarkerCoordinate({
        latitude: parseFloat(filteredData[0].listing_latitude),
        longitude: parseFloat(filteredData[0].listing_longitude),
      });
    }
    console.log(filteredData[0].listing_latitude);
};

  const [carousalView, setCarousalView] = useState(true);
  const navigation = useNavigation();

  const toogleView = () => {
    setCarousalView(!carousalView);
  };

  const navigationHandler = (data) => {
    navigation.navigate(routes.VENUE_PROFILE, data);
  };
  //console.log(responseData);
  return (
    <SafeAreaView edges={['top', 'left', 'right']} style={styles.container}>
      <View style={styles.mapContainer}>
        <Map width="100%" height="100%" markerCoordinate={markerCoordinate} />
        <Input placeholder="Search area"
        placeholderTextColor="#aaaaaa"
        style={styles.input}
        value={search}
        onChangeText={text=>
          onSearch(text)
        } />
      </View>
      <View style={styles.headingContainer}>
        <Heading style={styles.heading}>Things To Do</Heading>
        <TouchableOpacity onPress={toogleView}>
          <Heading style={{ ...styles.heading, color: theme.colors.blue }}>
            {carousalView ? 'List View' : 'Carousel View'}
          </Heading>
        </TouchableOpacity>
      </View>
      {carousalView ? (
        <Carousal data={searchData} onPress={navigationHandler} />

      ) : (
        <List data={searchData} onPress={navigationHandler} />
      )}
    </SafeAreaView>
  );
};

Map Component

import React from 'react';
import {StyleSheet} from 'react-native';
import MapView, {Marker, PROVIDER_GOOGLE} from 'react-native-maps';
import {baseStyle} from '../config';

export const Map = ({width, height, style}) => {
  return (
    <MapView
      provider={PROVIDER_GOOGLE}
      style={[styles.map, {width, height, ...style}]}
      region={{
        latitude: 24.83959,
        longitude: 67.08204,
        latitudeDelta: 0.015,
        longitudeDelta: 0.0121,
      }}
      zoomEnabled
      loadingEnabled
      >
        <Marker coordinate={{
          latitude: 24.83959,
          longitude: 67.08204
        }}/>
      </MapView>
    
  );
};

const styles = StyleSheet.create({
  map: {
    borderRadius: baseStyle.borderRadius(24),
  },
});

Answer 1

In your Map component you have set static values for the region change that into ,

  region={{
        latitude: markerCoordinate.latitude,
        longitude: markerCoordinate.longitude,
        latitudeDelta: 0.015,
        longitudeDelta: 0.0121,
      }}

And in the Marker Component also you have set default values . That's why the marker is in static place,

  <Marker coordinate={markerCoordinate} />

Don't forget to pass the prop 'markerCoordinate' in the Map Component,

export const Map = ({ width, height, style, markerCoordinate })

Try it and revert back to me .