UseNavigate is not working - Not navigating to different page

Question

CODE :

import React, { Component } from "react"; 
import Joi from "joi-browser"; 
import Form from "./form";
import { createTeam } from "../services/teamServices"; 
import { useNavigate,Navigate } from "react-router-dom"; 
class CreateNewTeam extends Form {
        state = {
            account: {
                teamName: "",
            },
            error: {},
        };
        schema = {
            teamName: Joi.string().required().label("Team Name"),
        };
        onSubmit = async () => {
            try {
                const data = await createTeam(this.state.account.teamName);
                console.log("Team Created!!!!!");
                const navigate = useNavigate();
                navigate("/addTeamMembers");
            } catch (ex) {
                console.log(ex.response);
            }
        };
        render() {
            return (
                <React.Fragment>
                    <form onSubmit={this.HandleSubmit}>
                        {this.renderInput("teamName", "Team Name")}
                        <button className="btn btn-secondary m-1">Next</button>
                    </form>
                </React.Fragment>
            );
        } }
    
export default CreateNewTeam;

After form is submitted I am getting Team created !! in console but it is not navigating to "/addTeamMemebers" page .

I have even tried <Navigate to="/addTeamMembers"/> instead of navigate("/addTeamMembers") but no use .

Need help

Thank you