Why the goBack function doesn't work? React Native

Question

I am new in React Native, I am working on an app where I had to add a prefabricated header, which brings a button to which I want to set the option to go back with the function goBack of Navigation, however the button does not Nothing, also I tried with Navigation.navigate ('route'), but the issue continues. I would really appreciate it if you can help with this.

The code:

import { NavigationContainer, useNavigationState} from '@react-navigation/native';
import { NavigationActions } from 'react-navigation';

import { createStackNavigator } from '@react-navigation/stack';
import { Toolbar } from 'react-native-material-ui';

import * as React from 'react';
import { Platform, StatusBar, StyleSheet, View, Text } from 'react-native';

import BottomTabNavigator from '../../navigation/BottomTabNavigator';
import LinkingConfiguration from '../../navigation/LinkingConfiguration';
import CatHome from '../../screens/subScreens/CatHome';

const Stack = createStackNavigator();

export default function Navigator({navigation}) {
  const SearchBar= ()=>{
    //const { navigate } = this.props.navigation;
    return(
      <Toolbar
        leftElement= {backOption()}
        onLeftElementPress= {()=>navigation.goBack()}
        //isSearchActive= {true}
        style={{
          container: styles.searchBar,
        }}
        centerElement="DIRECTAPP"
        searchable={{
          autoFocus: true,
          placeholder: 'Buscar',
        }}
        rightElement={{
            menu: {
                icon: "more-vert",
                iconProps : {
                  size: 30,
                  color: 'gray',
                },
                labels: ["Locación", "Contáctanos"]
            }        
        }}
        onRightElementPress={ (label) => { console.log(label) }}
      />
    );
  }
  return (
    <View style={styles.container}>
      {Platform.OS === 'ios' && <StatusBar barStyle="dark-content" />}
      <NavigationContainer linking={LinkingConfiguration}>
        <Stack.Navigator screenOptions={{
          headerLeft: null,
          headerTitle: props => <SearchBar {...props} />,
          headerStyle: {
            backgroundColor: '#9acd32',
          }

        }}>
          <Stack.Screen name="Root" component={BottomTabNavigator} />
          <Stack.Screen name="CatHome" component={CatHome} />
        </Stack.Navigator>
      </NavigationContainer>
    </View>
  );
}


function backOption (){
  //const Route=useRoute();
  const state = useNavigationState(state => state);
  const routeName = (state.routeNames[state.index]);
  //console.log(routeName);
  if (routeName=='Root') {
    return ''
  }
  else {
    return 'arrow-back'
  };
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
    },
    searchBar: {
      backgroundColor: '#9acd32',
      width: '100%',
      shadowOffset:  { width: 1, height: 13},
      shadowOpacity: 0.1,
    }
  });

Answer 1

Here is the new code:

import { NavigationContainer, useNavigationState, useNavigation } from '@react-navigation/native';

import { createStackNavigator } from '@react-navigation/stack';
import { Toolbar } from 'react-native-material-ui';

import * as React from 'react';
import { Platform, StatusBar, StyleSheet, View, Text } from 'react-native';

import BottomTabNavigator from '../../navigation/BottomTabNavigator';
import LinkingConfiguration from '../../navigation/LinkingConfiguration';
import CatHome from '../../screens/subScreens/CatHome';

const Stack = createStackNavigator();

export default function Navigator() {

  return (
    <View style={styles.container}>
      {Platform.OS === 'ios' && <StatusBar barStyle="dark-content" />}
      <NavigationContainer linking={LinkingConfiguration}>
        <Stack.Navigator screenOptions={{
          headerLeft: null,
          headerTitle: props => <SearchBar {...props} />,
          headerStyle: {
            backgroundColor: '#9acd32',
          }

        }}>
          <Stack.Screen name="Root" component={BottomTabNavigator} />
          <Stack.Screen name="CatHome" component={CatHome} />
        </Stack.Navigator>
      </NavigationContainer>
    </View>
  );
}



function SearchBar (){
   const navigation = useNavigation();
   //const { navigate } = this.props.navigation;
   return(
     <Toolbar
       leftElement= {backOption()}
       onLeftElementPress= {()=>navigation.goBack()}
       //isSearchActive= {true}
       style={{
         container: styles.searchBar,
       }}
       centerElement="DIRECTAPP"
       searchable={{
         autoFocus: true,
         placeholder: 'Buscar',
       }}
       rightElement={{
           menu: {
               icon: "more-vert",
               iconProps : {
                 size: 30,
                 color: 'gray',
               },
               labels: ["Locación", "Contáctanos"]
           }        
       }}
       onRightElementPress={ (label) => { console.log(label) }}
     />
   );
}

function backOption (){
  //const Route=useRoute();
  const state = useNavigationState(state => state);
  const routeName = (state.routeNames[state.index]);
  //console.log(routeName);
  if (routeName=='Root') {
    return ''
  }
  else {
    return 'arrow-back'
  };
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
    },
    searchBar: {
      backgroundColor: '#9acd32',
      width: '100%',
      shadowOffset:  { width: 1, height: 13},
      shadowOpacity: 0.1,
    }
  });