Return useState to default afer onPress - react-native

Question

I'm writing a customised modal for prompts on my react native application. I'd want the modal to appear on click of an image. So, I added an onPress to the image to change a state value. When the state value is true, I'd want the modal to be displayed. The state successfully becomes true. However, I'd want it to switch back to false after the modal closes.
I tried changing the values from inside the component but it throws an error since I'm importing the component, and passing values as props. Below is what I have:
const [showPrompt, setShowPrompt] = useState(false)
const show =() => {
setShowPrompt(true);
setShowPrompt(false)
console.log(showPrompt)
}
<TouchableOpacity onPress={show}>
<Image source={{uri: imageSource}} style={{height:130, width:150}}/>
<Text style={{color:'white', textAlign:'center', fontSize:16, fontFamily:fonts.nunitoRegular}}>{title}</Text>
</TouchableOpacity>
{showPrompt && <CustomPrompt
open={modalVisible}
onClose={()=> setModalVisible(!modalVisible)}
openModalText={()=>setModalVisible(true)}
/>
}

Answer 1

try useCallback()
setShowPrompt(true);
//the time between these 2 operations is just a Boolean value assignment,
//that is, it is only a few milliseconds and you would be able to view
//the rendering
setShowPrompt(false);
import React, {useState, useCallback} from 'react'
const show = useCallback(() => {
setShowPrompt(!showPrompt);
console.log(showPrompt)
}, [showPrompt]);
<TouchableOpacity onPress={show}>
<Image source={{uri: imageSource}} style={{height:130, width:150}}/>
<Text
style={{
color:'white',
textAlign:'center',
fontSize:16,
fontFamily:fonts.nunitoRegular}}>
{title}
</Text>
</TouchableOpacity>