how to handle navigation of react application using 'react speech recognition Api'

Question

I am creating a react app but I want to handle navigation of my app using voice I have added very much like its listning to me but still not navigation and one one thing om using here useEffect to listen me itself but its annoying to keep listning without stopping, here is my code:

import React, { useEffect } from "react";
import Product from "./pages/Product";
import Home from "./pages/Home";
import ProductList from "./pages/ProductList";
import Register from "./pages/Register";
import Login from "./pages/Login";
import Cart from "./pages/Cart";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect,
} from "react-router-dom";
import { useHistory } from "react-router-dom/cjs/react-router-dom.min";
import Success from "./pages/Success";
import { useSelector } from "react-redux";
import FormComponent from "./customization/CustomizeForm";
import FilteredProducts from "./pages/FilteredProducts";
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'

const App = () => {
  const history = useHistory()
  const user = useSelector((state) => state.user.currentUser);
  const commands = [
    {
      command: "go home",
      callback: () => {
        history.push("/");
      },
    },
    {
      command: "go to products",
      callback: () => {
        history.push("/products");
      },
    },
    {
      command: "go to cart",
      callback: () => {
        history.push("/cart");
      },
    },
    // Add more voice commands and corresponding callbacks for navigation
  ];
  const { transcript, browserSupportsSpeechRecognition } = useSpeechRecognition({ commands })
  // useEffect(() => {
  //   SpeechRecognition.startListening({ language: 'en-IN' });

  // });
  if (!browserSupportsSpeechRecognition) {
    return null
  }
  console.log("transcript", transcript)
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/products/:category">
          <ProductList />
        </Route>
        <Route path="/product/:id">
          <Product />
        </Route>
        <Route path="/cart">
          <Cart />
        </Route>
        <Route path="/success">
          <Success />
        </Route>
        <Route path="/login">
          {user ? <Redirect to="/" /> : <Login />}
        </Route>
        <Route path="/register">
          {user ? <Redirect to="/" /> : <Register />}
        </Route>
        <Route path="/customize">
          <FormComponent />
        </Route>
        <Route path="/filteredProducts">
          <FilteredProducts />
        </Route>
      </Switch>
    </Router>
  );
};

export default App;

Please state me if something is wrong here