Guide step not showing when wrapping my searchbar with TourGuideZone

[nabildhiba]

Hi everyone,
I am writing to you because I am using rn-tourguide in my react-native android application.
I've implemented all the components :

• Wrapping the App.js with TourGuideProvider
• Launched the TourGuide in the Home.js:
  React.useEffect(() => { start() }, [])
• The TourGuideZone works when not wrapping the Home.js element, but whenever I try to wrap my SearchBar element, the SearchBar element disappears.
• Code for wrapping the SearchBar:
  <TourGuideZone zone={1} text={'Updated! 🎉'} borderRadius={16} > <SearchBar onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true console.log("We are here"); const { lat: latitude, lng: longitude } = details.geometry.location; setLocationAlarm(details.name); setLocationPlaceIdAlarm(data.place_id); // setRegion(prev => ({...prev, latitude, longitude})); mapRef.current.animateToRegion({ latitude: latitude, longitude: longitude, latitudeDelta: 0.0922, longitudeDelta: 0.0421, }); setMarker({ coordinate: { latitude, longitude }, }); rawSheetRef.current.open(); }} /> </TourGuideZone>
• My searchbar js:
  `import React, {useRef} from 'react';
  import {TouchableOpacity, StyleSheet, View, Dimensions} from 'react-native';
  import IIcon from 'react-native-vector-icons/Ionicons';
  import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';

const GLOBAL = require('../Utils/Global');
const {width} = Dimensions.get('screen');

export default function SearchBar({onPress}) {
const [text, onChangeText] = React.useState('');
const autoCompleteRef = useRef();

return (

<GooglePlacesAutocomplete
ref={autoCompleteRef}
placeholder="Search"
onPress={onPress}
query={{
key: GLOBAL.MAPS_API_KEY,
language: 'en',
}}
styles={{
textInput: {
borderRadius: 20,
paddingLeft: 15,
paddingRight: 36,
},
}}
textInputProps={{onChangeText}}
enablePoweredByContainer={false}
fetchDetails
// GoogleReverseGeocodingQuery
/>
{text === '' ? (
<TouchableOpacity
onPress={() => {
autoCompleteRef?.current?.setAddressText('');
onChangeText('');
}}
style={styles.iconContainer}>


) : (
<TouchableOpacity
onPress={() => {
autoCompleteRef?.current?.setAddressText('');
onChangeText('');
}}
style={styles.iconContainer}>


)}

);
}

const styles = StyleSheet.create({
container: {
position: 'absolute',
top: 10,
alignSelf: 'center',
flexDirection: 'row',
width: width * 0.85,
},
input: {
height: 40,
width: width * 0.8,
margin: 12,
// borderWidth: 1,
borderRadius: 15,
padding: 10,
backgroundColor: '#fff',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,

elevation: 5,

},
iconContainer: {
position: 'absolute',
right: 15,
top: 12,
},
});
`

Any ideas ?