How to update modal information without reopening the modal in react native?

I have a modal which opens when a product is clicked and details of that product are displayed in modal there is also a you might also like section of products which have the same view as product now I want that when a you might like product is clicked the modal should update the information without opening a modal above existing modal. How can I do that?

const cartProducts = useSelector(state => state.cart.cartProducts);
const dispatch = useDispatch();
const [MyProducts,setProducts] = useState([]);
const prodCode = product.ItemCode;
const {user} = useSelector(state=>state.auth);

async function fetchProducts(){
 //console.log(prodCode);
 await axios({
               method:'GET',
               url:`${BASE_URL}/items/${prodCode}`,
               headers:{
                   'Authorization': AUTH_KEY,
               }
           })
           .then((response)=>{  
             setIsLoading(false);
             const status = response.data[0]['status'];
             //console.log(status);
             if(status=='success'){
               const items = response.data[0]['body']['related'];
               if(items){
                 //console.log(items);
                 setProducts(items);
               }
               //console.log(Products);
               }
               if(status=='error'){
                 MyToast(status);
               }
           }).catch((error)=>{
             setIsLoading(false);
               MyToast('Error: '+error.message);
               //console.log('Error is: ',error.message);
           });
}

useEffect(()=>{
 if(MyProducts.length === 0 && visible){
 fetchProducts();
 }
},[MyProducts]);

return (
 <Modal
   animationType="slide"
   transparent={true}
   visible={visible}>
   <View style={styles.centeredView}>
     <View style={styles.modalView}>
       <View style={styles.modalClose}>
         <TouchableOpacity style={styles.button} onPress={() => { handlePinClick()}}>
           <IconPin name={isPin ? 'pushpin' : 'pushpino'} size={responsiveWidth(6)} color={Colors.primary} />
         </TouchableOpacity>
         <TouchableOpacity style={styles.button} onPress={() => { handleFavoriteClick() }}>
           <IconFavorite style={{ padding: responsiveWidth(1.5) }} name={'ios-heart'} size={responsiveWidth(8)} color={isFavorite ? 'red' : Colors.grey} />
         </TouchableOpacity>
         <IconClose style={[styles.button, { padding: responsiveWidth(1.5) }]} name='cross' size={responsiveWidth(8.5)} color={Colors.black} onPress={() => onClose()} />
       </View>
       <ScrollView style={{ paddingBottom: responsiveHeight(7) }}>
         <Image style={styles.modalImage} source={{ uri: isFromAll ? product.feature_image : product['item_details'].feature_image }} />
         <Text style={styles.modalProdName}>{isFromAll ? product.ItemName : product['item_details'].ItemName}</Text>
         <ExpandableComponent product={product} isFromAll={isFromAll}/>
           {MyProducts.length !== 0 && 
           <View style={{ paddingVertical: responsiveHeight(1) }}>
           <Text style={styles.youMightText}>You might also Like</Text>
           {isLoading ?
             <View style={{height:responsiveHeight(28),flexWrap:'wrap' }}>
                 {widthList.map((item, index) => <ShimmerItem key={index} item={item} />)}
             </View> :
             <FlatList
               horizontal
               data={MyProducts}
               renderItem={({ item }) => <Product key={item.key} product={item} isFromAll={true}/>}
               ListEmptyComponent={()=><EmptyComponent height={30} text={'No Product!'}/>}
             />
             }
             </View>
             }
       </ScrollView>
       <View style={styles.bottomView}>
         {cartProducts && <BottomSheetScreen itemsCount={cartProducts.length} />}
       </View>
     </View>
   </View>
 </Modal>
)
}