`Object(...) is not a function` for history.push('/') in Login.js

I am at this part of the tutorial: Create a Custom React Hook to Handle Form Fields

I am getting this error:

react-dom.development.js:11102 Uncaught TypeError: Object(…) is not a function
at Login (Login.js:31)
at renderWithHooks (react-dom.development.js:14803)
at mountIndeterminateComponent (react-dom.development.js:17482)
at beginWork (react-dom.development.js:18596)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at beginWork$1 (react-dom.development.js:23203)
at performUnitOfWork (react-dom.development.js:22154)
at workLoopSync (react-dom.development.js:22130)

This is my Login.js component:

import React, { useState } from "react";
import { Auth } from "aws-amplify";
import { useHistory } from "react-router-dom";
import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
import LoaderButton from "../components/LoaderButton";
import { useFormFields } from "../libs/hooksLib";
import { onError } from "../libs/errorLib";
import "../css/index.css";
export default function Login() {
  const history = useHistory();
  const { userHasAuthenticated } = useAppContext();
  const [isLoading, setIsLoading] = useState(false);
  const [fields, handleFieldChange] = useFormFields({
email: "",
password: ""
  });

  function validateForm() {
return fields.email.length > 0 && fields.password.length > 0;
  }

  async function handleSubmit(event) {
event.preventDefault();

setIsLoading(true);

try {
  await Auth.signIn(fields.email, fields.password);
  userHasAuthenticated(true);
  //history.push("/");
} catch (e) {
  onError(e);
  setIsLoading(false);
}
  }

  return (
<div className="Login">
  <form onSubmit={handleSubmit}>
    <FormGroup controlId="email" bsSize="large">
      <ControlLabel>Email</ControlLabel>
      <FormControl
        autoFocus
        type="email"
        value={fields.email}
        onChange={handleFieldChange}
      />
    </FormGroup>
    <FormGroup controlId="password" bsSize="large">
      <ControlLabel>Password</ControlLabel>
      <FormControl
        type="password"
        value={fields.password}
        onChange={handleFieldChange}
      />
    </FormGroup>
    <LoaderButton
      block
      type="submit"
      bsSize="large"
      isLoading={isLoading}
      disabled={!validateForm()}
    >
      Login
    </LoaderButton>
  </form>
</div>
  );
}

I pretty much copy and pasted my Login js from the tutorial. I updated the locations for all my code (really just my css).

I am pretty lost why I am getting this error. seems to be the way the history hook is?

Oh what’s line 31 in your code?