Sign-in page wont show up

I'm trying to make a Sign-In page & the Sign-In form has disappeared. It isn't rendering like it should on the DOM anymore. I think it has to do with my import {useState} from 'react'. Everything was working fine until I included the {useState} hook. I am getting the following error message:

react.development.js:1476 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

Im not sure where I went wrong. Any suggestions?

import { useState } from 'react';
import { useForm } from 'react-hook-form';
import './App.css';

function App() {
  const { register, handleSubmit, errors } = useForm();
  const [userInfo, setUserInfo] = useState();
  const onSubmit = (data) => {
    setUserInfo(data);
    console.log(data);
  };
  console.log(errors);

  return (
    <div className="container">
      <pre>{JSON.stringify(userInfo, undefined, 2)}</pre>
      <form onSubmit={handleSubmit(onSubmit)}>
        <h1>Registration Form</h1>
        <div className="ui divider"></div>
        <div className="ui form">
          <div className="field">
            <label>Username</label>
            <input
              type="text"
              name="username"
              placeholder="Username"
              ref={register({ required: true })}
            />
            
          </div>
          <p>{errors.username?.message}</p>
          <div className="field">
            <div className="field">
              <label>Email</label>
              <input
                type="text"
                name="email"
                placeholder="Email"
                ref={register({ required: true })}
              />
            </div>
            <p>{errors.email?.message}</p>

            <div className="field">
              <div className="field">
                <label>Password</label>
                <input
                  type="text"
                  name="password"
                  placeholder="Password"
                  ref={register({ required: true })}
                />
              </div>
              <p>{errors.password?.message}</p>

              <button className="fluid ui button blue">Submit</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  );
}
export default App;

*************.  INDEX.JS.  **************

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);


**********  PACKAGE.JSON  ******************

{
  "name": "my-form",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}