form validation in reactjs

import React, { useState } from "react";
//import bgimg from '.';

// TODO:formik library

function Signup() {
  //   const [firstName, setFirstName] = useState("");
  //   const [lastName, setLastName] = useState("");
  //   const [email, setEmail] = useState("");
  //   const [password, setPassword] = useState("");
  const [inputFields, setInputFields] = useState({
    firstName: "",
    lastName: "",
    email: "",
    password: "",
  });

  //   const [inputErrors, setInputErrors] = useState({
  //     firstName: "",
  //     lastName: "",
  //     email: "",
  //     password: "",
  //   });
  return (
    <div className="text-gray-800 flex">
      {/* <div className='flex sm:w-1/2 sm:max-h-screen'>
            <img src="" alt="" />
        </div> */}

      <div className="text-teal-800 p-8 font-semibold w-1/2">
        <div className="font-extrabold text-2xl p-6 underline">Sign Up</div>
        <form method="post">
          <div className="p-3 mb-2 rounded-full bg-gray-100 hover:bg-gray-50">
            First Name :
            <input
              type="text"
              //   value={firstName}
              value={inputFields.firstName}
              onChange={(event) => {
                // setFirstName(event.target.value);
                setInputFields({
                  ...inputFields,
                  firstName: event.target.value,
                });
                // if (inputFields.firstName.length < 5) {
                //   setInputErrors({
                //     ...inputErrors,
                //     firstName: "First Name is invalid!",
                //   });
                // } else {
                //   setInputErrors({
                //     ...inputErrors,
                //     firstName: "",
                //   });
                // }
              }}
              name="firstName"
              placeholder="Enter first name"
              className="outline-none p-2 ml-2 rounded-lg bg-gray-100"
            />
            <p>{inputErrors.firstName}</p>
          </div>

          <div className="p-3 mb-2 rounded-full bg-gray-100 hover:bg-gray-50">
            <label htmlFor="lastName">Last Name :</label>
            <input
              className="outline-none p-2 ml-2 rounded-lg bg-gray-100"
              type="text"
              value={inputFields.lastName}
              onChange={(event) => {
                // setLastName(event.target.value);
                setInputFields({
                  ...inputFields, //TODO: spread operator in js
                  lastName: event.target.value,
                });
              }}
              //   value={inputFields.lastName}
              placeholder="Enter last name"
              name="lastName"
            />
          </div>

          <div className="p-3 mb-2 rounded-full bg-gray-100 hover:bg-gray-50">
            E-mail :
            <input
              //   value={inputFields.email}
              className="outline-none p-2 ml-2 rounded-lg bg-gray-100"
              type="text"
              value={inputFields.email}
              onChange={(event) => {
                // setEmail(event.target.value);
                setInputFields({
                  ...inputFields,
                  email: event.target.value,
                });
              }}
              placeholder=" [email protected]"
              name="email"
            />
          </div>

          <div className="p-3 mb-4 rounded-full bg-gray-100 hover:bg-gray-50">
            Password :
            <input
              //   value={inputFields.password}
              value={inputFields.password}
              onChange={(event) => {
                // setPassword(event.target.value);
                setInputFields({
                  ...inputFields,
                  password: event.target.value,
                });
              }}
              className="outline-none p-2 ml-2 rounded-lg bg-gray-100"
              type="password"
              placeholder=" password"
              name="pass"
            />
          </div>

          <div className="bg-teal-600 shadow-lg rounded-full text-center font-bold text-white p-2 mb-2 hover:bg-teal-800">
            <button
              type="submit"
              onClick={(event) => {
                event.preventDefault();
                console.log(inputFields);
              }}
            >
              SIGN UP
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

export default Signup;