useHistory: Cannot read properties of undefined (reading 'push')

import React from "react";
import { Route, Switch, HashRouter, useHistory } from "react-router-dom";
import Home from "../pages/home/HomeComponent";
import Splash from "../pages/splash/Splash";
import Education from "../pages/education/EducationComponent";
import Experience from "../pages/experience/Experience";
import Contact from "../pages/contact/ContactComponent";
import Projects from "../pages/projects/Projects";
import HobbiesPage from "../pages/hobbies/Hobbies";
import { settings } from "../portfolio.js";
import GamingPage from "../pages/gaming/gaming";
import AnimePage from "../pages/anime/Anime";
import { recognition } from "../components/speechRecognition/SpeechRecognition";

export default function Main(propss) {
  const history = useHistory();
  recognition.onresult = (event) => {
    const command = event.results[0][0].transcript;

    if (command.includes("navigate to") || command.includes("go to")) {
      if (command.includes("home") || command.includes("index")) {
        history.push("/home");
      } else if (command.includes("education") || command.includes("index")) {
        history.push("/education");
      } else if (command.includes("experience") || command.includes("index")) {
        history.push("/experience");
      } else if (command.includes("contact") || command.includes("index")) {
        history.push("/contact");
      }
    }
  };

  recognition.onend = () => {
    recognition.start();
  };

  if (settings.isSplash) {
    return (
      <div>
        <HashRouter basename="/">
          <Switch>
            <Route
              path="/"
              exact
              render={(props) => (
                <Splash
                  {...props}
                  theme={propss.theme}
                  setTheme={propss.setTheme}
                />
              )}
            />
            <Route
              path="/home"
              render={(props) => (
                <Home
                  {...props}
                  theme={propss.theme}
                  setTheme={propss.setTheme}
                />
              )}
            />
            <Route
              path="/experience"
              exact
              render={(props) => (
                <Experience
                  {...props}
                  theme={propss.theme}
                  setTheme={propss.setTheme}
                />
              )}
            />
            <Route
              path="/education"
              render={(props) => (
                <Education
                  {...props}
                  theme={propss.theme}
                  setTheme={propss.setTheme}
                />
              )}
            />
            <Route
              path="/contact"
              render={(props) => (
                <Contact
                  {...props}
                  theme={propss.theme}
                  setTheme={propss.setTheme}
                />
              )}
            />
            <Route
              path="/splash"
              render={(props) => (
                <Splash
                  {...props}
                  theme={propss.theme}
                  setTheme={propss.setTheme}
                />
              )}
            />
            <Route
              path="/projects"
              render={(props) => (
                <Projects
                  {...props}
                  theme={propss.theme}
                  setTheme={propss.setTheme}
                />
              )}
            />
            <Route
              path="/hobbies"
              render={(props) => (
                <HobbiesPage
                  {...props}
                  theme={propss.theme}
                  setTheme={propss.setTheme}
                />
              )}
            />
            <Route
              path="/gaming"
              render={(props) => (
                <GamingPage
                  {...props}
                  theme={propss.theme}
                  setTheme={propss.setTheme}
                />
              )}
            />
            <Route
              path="/anime"
              render={(props) => (
                <AnimePage
                  {...props}
                  theme={propss.theme}
                  setTheme={propss.setTheme}
                />
              )}
            />
          </Switch>
        </HashRouter>
      </div>
    );
  } else {
    return (
      <div>
        <HashRouter basename="/">
          <Switch>
            <Route
              path="/"
              exact
              render={(props) => (
                <Home
                  {...props}
                  theme={propss.theme}
                  setTheme={propss.setTheme}
                />
              )}
            />
            <Route
              path="/home"
              render={(props) => (
                <Home
                  {...props}
                  theme={propss.theme}
                  setTheme={propss.setTheme}
                />
              )}
            />
            <Route
              path="/experience"
              exact
              render={(props) => (
                <Experience
                  {...props}
                  theme={propss.theme}
                  setTheme={propss.setTheme}
                />
              )}
            />
            <Route
              path="/education"
              render={(props) => (
                <Education
                  {...props}
                  theme={propss.theme}
                  setTheme={propss.setTheme}
                />
              )}
            />
            <Route
              path="/contact"
              render={(props) => (
                <Contact
                  {...props}
                  theme={propss.theme}
                  setTheme={propss.setTheme}
                />
              )}
            />
            <Route
              path="/projects"
              render={(props) => (
                <Projects
                  {...props}
                  theme={propss.theme}
                  setTheme={propss.setTheme}
                />
              )}
            />
            <Route
              path="/hobbies"
              render={(props) => (
                <HobbiesPage
                  {...props}
                  theme={propss.theme}
                  setTheme={propss.setTheme}
                />
              )}
            />
            <Route
              path="/gaming"
              render={(props) => (
                <GamingPage
                  {...props}
                  theme={propss.theme}
                  setTheme={propss.setTheme}
                />
              )}
            />
            <Route
              path="/anime"
              render={(props) => (
                <AnimePage
                  {...props}
                  theme={propss.theme}
                  setTheme={propss.setTheme}
                />
              )}
            />
          </Switch>
        </HashRouter>
      </div>
    );
  }
}

> Uncaught TypeError: Cannot read properties of undefined (reading
> 'push')
> at Main.components_speechRecognition_SpeechRecognition__WEBPACK_IMPORTED_MODULE_12_.recognition.onresult
> (Main.js:22:1)
> Main.components_speechRecognition_SpeechRecognition__WEBPACK_IMPORTED_MODULE_12_.recognition.onresult
> @ Main.js:22

And

> VM338:2 Uncaught ReferenceError: process is not defined
> at 4043 (<anonymous>:2:13168)
> at r (<anonymous>:2:306599)
> at 8048 (<anonymous>:2:9496)
> at r (<anonymous>:2:306599)
> at 8641 (<anonymous>:2:1379)
> at r (<anonymous>:2:306599)
> at <anonymous>:2:315627
> at <anonymous>:2:324225
> at <anonymous>:2:324229
> at e.onload (index.js:1:1)

The useHistory hook needs a routing context provided above it in the ReactTree. Move the HashRouter to wrap this Main component so it has a defined history reference to use.

Example:

import { HashRouter } from "react-router-dom";

...

<HashRouter>
  ...
  <Main />
  ...
</HashRouter>

import React from "react";
import { Route, Switch, useHistory } from "react-router-dom";
...

export default function Main(propss) {
  const history = useHistory();

  recognition.onresult = (event) => {
    const command = event.results[0][0].transcript;

    if (command.includes("navigate to") || command.includes("go to")) {
      if (command.includes("home") || command.includes("index")) {
        history.push("/home");
      } else if (command.includes("education") || command.includes("index")) {
        history.push("/education");
      } else if (command.includes("experience") || command.includes("index")) {
        history.push("/experience");
      } else if (command.includes("contact") || command.includes("index")) {
        history.push("/contact");
      }
    }
  };

  recognition.onend = () => {
    recognition.start();
  };

  if (settings.isSplash) {
    return (
      <div>
        <Switch>
          ...
        </Switch>
      </div>
    );
  } else {
    return (
      <div>
        <Switch>
          ...
        </Switch>
      </div>
    );
  }
}