Navigate function changing page to the AdminEntry component?

Question

I am trying to navigate to a new component called AdminEntry, its inside a file called admin-entry.jsx, so after the if statement has been satisfied it moves to a new page with the AdminEntry component, navigate function is returning invalid hook, its not changing page but the if statement always gets satisfied and alert "Admin logged in" this is what I did:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import React from 'react';
import './sign-admin.css';
import FormInput from "../form-input";
import CustomButton from "../custom-button";
import { auth } from "../firebase";
import { useNavigate } from "react-router-dom";



class AdminSign extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            email: '',
            password: ''
        }
   }

   

   handleSubmit = async event => {
       event.preventDefault();
       const {email, password} = this.state

       const navigate = useNavigate();


    if(this.state.email !== '**********' && this.state.password !== '*******'){
            alert('Not an admin')
    }else{

           await auth.signInWithEmailAndPassword(email, password);
           this.setState({email: '', password: ''});
           alert('Admin logged in');
           navigate('/admin-entry', { replace: true });
      
       

    }
   }

   handleChange = event => {
       const {value, name} = event.target;
       this.setState({[name]: value})
   }

    render(){
        return(
            <div className="admin-sign">
                <div>
                <h3>Admin Account</h3>
                <span>SignIn with your email and password</span>
                <form onSubmit={this.handleSubmit}>
                    <FormInput type={'email'}  name='email' value={this.state.email} handleChange={this.handleChange} label="email" />
                    <FormInput type={'password'} name='password' value={this.state.password} handleChange={this.handleChange} label="password"/>
                    <div className="buttons">
                    <CustomButton type={'submit'}>Sign In</CustomButton>
                    </div>

                </form>
                </div>
                

            </div>
        )
    }
}

export default AdminSign;