How to going back using ionNav or ionNavLink

Ionic Framework Ionic React
1

hi, i want to ask about IonNav after i read documentation ion-nav: Nav View Component for Ionic Framework Apps

i try to follow for schema crud
first i create tab 1 for define ionNav like this “<IonNav root={() => }>” and in list template have button add like this “<IonNavLink routerDirection=“forward” component={() => }>” and my component just change to add data when i click button add and my question how to back to List data page after submit data i just try with history push and return IonNav and IonNavLink but not working

my page add data like this

import {
  IonContent, 
  IonList,
  IonInput,
  IonItem,
  IonLabel,
  IonButton,
  IonPage,
  IonNav,
  IonNavLink,
  NavContext,
  NavCustomEvent,
  IonBackButton,
  IonRouterContext
} from '@ionic/react';

import React, {useState, useContext} from 'react';
import {  BrowserRouter as Router, Route,RouteComponentProps, useHistory } from 'react-router-dom';
import DynamicHeader from './Header';
import axios from 'axios';
import List from './List';
// import { useNavigate } from 'react-router-dom';

const Add: React.FC<RouteComponentProps> = () => {
  const history = useHistory();
  const { navigate } = useContext(NavContext);
  const token = localStorage.getItem('token');
  // const navigate = useNavigate();
  const [formData, setFormData] = useState({
    name: '',
    description: ''
  });

  const config = {
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'multipart/form-data'
    }
  };
  const routerContext = useContext(IonRouterContext);
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
     ???? how to back list page???

    } catch (error) {

    }
  };
  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };
  return (
    <>
      <IonPage>
        <DynamicHeader title="ADD Data" />
        <IonContent class="ion-padding">
          <IonList>
            <form onSubmit={handleSubmit}>
              <IonItem>
                <IonLabel position="floating">Name</IonLabel>
                <IonInput type="text" name="name" value={formData.name} onIonChange={handleChange} required></IonInput>
              </IonItem>
              <IonItem>
                <IonLabel position="floating">Description</IonLabel>
                <IonInput type="text" name="description" value={formData.description} onIonChange={handleChange} required></IonInput>
              </IonItem>
              <IonButton type="submit">Submit</IonButton>
            </form>
          </IonList>
        </IonContent>
      </IonPage>

      <IonNavLink routerDirection="forward" component={() => <List />}></IonNavLink>
    </>
  );
}

export default Add;

Thank you.