La navegación no redirige a la ruta especificada en ReactJS.

Estoy tratando de redirigir a otro enrutador cuando el usuario hace clic en un botón específico (llamado “Navigate” en este caso) en un componente basado en clase (llamado “Counter”). Estoy usando <navigate></navigate> para eso. No redirige a la página que he especificado para redirigir a (path=’/ ‘ para la página de inicio). Además, no recibo ningún error. Alguien, por favor, dime la mejor manera de usar <navigate></navigate>.

A modo de referencia, el código es:

import React, {Component} from "react";
import {Navigate} from 'react-router-dom'

class Counter extends Component {
    constructor(props){
        super(props)

        this.state = {

        }

        this.navigate = this.navigate.bind(this)
    }

    navigate(e){
        return <navigate to="/"></navigate>
    }

    render(){
        return (
            <div classname='text-center'>
                <h1>Hola, este es una aplicación de contador</h1>
                <button onclick="{this.navigate}">Navigate</button>
            </div>
        )
    }
}

export default Counter