React will not render in the DOM

Question

I'm trying to make a signIn page and my SignIn page 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. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1476:1)
    at Object.useRef (react.development.js:1515:1)
    at useForm (useForm.ts:51:1)
    at App (App.js:9:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)

Im not sure where I went wrong. Any suggestions?

////////// 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')
);

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

const App = () => {
  const [userName, setUserName] = useState('');
  const [password, setPassword] = useState('');
  const [email, setEmail] = useState('');
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const [userInfo, setUserInfo] = useState();
  return (
    <div className="container">
      <pre>{JSON.stringify(userInfo, undefined, 2)}</pre>
      <form
        onSubmit={handleSubmit((data) => {
          setUserInfo(data);
          setUserName('');
          setEmail('');
          setPassword('');
        })}
      >
        <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"
              {...register('username', { required: 'This is required' })}
              value={userName}
              onChange={(e) => setUserName(e.target.value)}
            />
          </div>
          <p>{errors.username?.message}</p>
          <div className="field">
            <div className="field">
              <label>Email</label>
              <input
                type="email"
                name="email"
                placeholder="Email"
                {...register('email', { required: 'This is required' })}
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>
            <p>{errors.email?.message}</p>

            <div className="field">
              <div className="field">
                <label>Password</label>
                <input
                  type="password"
                  name="password"
                  placeholder="Password"
                  {...register('password', { required: 'This is required' })}
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                />
              </div>
              <p>{errors.password?.message}</p>

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

export default App;

////////////// APP.CSS /////////////
body {
  background: rgb(2, 0, 36);
  background: radial-gradient(
    circle,
    rgba(2, 0, 36, 1) 0%,
    rgba(0, 212, 255, 1) 0%,
    rgba(9, 9, 121, 1) 100%
  );
}

.container {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  max-width: 500px;
  width: 100%;
  margin: auto;
}

.container > form {
  width: 70%;
  border: 1px solid #dfdfdf;
  padding: 20px;
  border-radius: 5px;
  background: #fff;
}

pre {
  width: 70%;
  color: #fff;
  font-size: larger;
}

button {
  background: #0563b4 !important;
}
p {
  color: red;
}

///////// 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"
    ]
  }
}

Answer 1

It's probably because you used useState without giving it an initial value in userInfo.

...

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

...

This should work.