In React Native why the hook re-render when run useState function inside the hook

import { useState } from 'react';import { getCurrentLocation } from '../screens/freelancer/Search/LocationPicker/getCurrentLocation';import { StyleSheet, Modal, Text, View, TextInput, TouchableOpacity } from 'react-native';import Predictions from '../screens/freelancer/Search/LocationPicker/Predictions';import History from '../screens/freelancer/Search/LocationPicker/History';const useLocationPicker = ({     handleSelect}) => {const [modalVisible, setModalVisible] = useState(false);const [query, setQuery] = useState('')const handleOpenLocationPicker = async () => {setModalVisible(true)}const handleCloseLocationPicker = async () => {setModalVisible(false)setQuery('');}const handleSearch = async (text) => {  setQuery(text);}const handleGetCurrentLocation = async () => {const CURRENT_LOCATION = await getCurrentLocation()handleSelect(CURRENT_LOCATION)handleCloseLocationPicker();};const handleSelectLocation = async (data) => {handleSelect(data)handleCloseLocationPicker();};const LocationPickerModal = () => (<Modal      animationType="slide"      presentationStyle='formSheet'      visible={modalVisible}      onRequestClose={handleCloseLocationPicker}><View><TextInput            onChangeText={(text)=>handleSearch(text)}            placeholder='Search'            style={styles.searchBox}            /></View>        {query.length===0?<><TouchableOpacity            style={styles.item}            onPress={handleGetCurrentLocation}><View            style={styles.itemIcon}            /><Text style={styles.p1}>Your location</Text> </TouchableOpacity><History            handleSelect={handleSelectLocation}            /></>          :<Predictions          query={query}          handleSelect={handleSelectLocation}          />          }</Modal>  );return {     handleOpenLocationPicker,     LocationPickerModal};}export default useLocationPickerconst styles = StyleSheet.create({    item:{      flexDirection:'row',      gap:20,      paddingHorizontal:20,      paddingVertical:10,      alignItems:'center',      minHeight:60,      marginBottom:10,    },    itemIcon: {      width:30,      height:30,      backgroundColor: 'blue',      borderRadius:100    },    itemIconLoading: {      width:30,      height:30,      backgroundColor: 'red',      borderRadius:100    },    p1: {      fontSize:16,      fontWeight:'500',    },    searchBox: {      backgroundColor:'red',      padding:20,      fontSize:14    }  })

i create this location picker. i want use it in more than one screens that is the reason i want to create a common component. i try this way above. Working when handleSelect, but when try to setQuery not working correct, for a reason modal close and re-open, is like when run any function in hook auto re render. How can fix this?