I am not able to place marker according to search

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),
},
});

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

<!-- end snippet -->

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  <Marker coordinate={markerCoordinate} />

<!-- end snippet -->

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

<!-- end snippet -->

Try it and revert back to me .