How to make a button inactive in a form

I have a form with a transition to another page after authorization. I need the button to be inactive until the number of characters is not enough.

type User = {
  name: string;
  password: string;
};

function Login() {
  const adminUser: User = {
    name: "admin",
    password: "admin123",
  };

  const [user, setUser] = useState({ name: "" });
  const [error, setError] = useState("");
  const Login = (inputValue: { name: string; password: string }) => {
    console.log(inputValue);
    if (
      inputValue.name === adminUser.name &&
      inputValue.password === adminUser.password
    ) {
      setUser({
        name: inputValue.name,
      });
    } else {
      setError("Fill in the fields!");
    }
  };

  return (
          <div>
        {user.name !== "" ? (
          <Redirect to={"/Chat"} />
        ) : (
          <LoginForm Login={Login} error={error} />
        )}
      </div>
)

import React, { FormEvent, useState } from "react";
// import React, { FormEvent, useState, useEffect } from "react";

interface ILoginForm {
  Login: (inputValue: { name: string; password: string }) => void;
  error: string;
}

const MoleculesLoginForm: React.FC<ILoginForm> = ({ Login, error }) => {
  const [inputValue, setInputValue] = useState({ name: "", password: "" });

  // const [namedError, setNamedError] = useState("");
  // const [passwordError, setPasswordError] = useState("");
  // const [formValid, setFormValid] = useState(false);
  // useEffect(() => {
  //   if (namedError || passwordError) {
  //     setFormValid(false);
  //   } else {
  //     setFormValid(true);
  //   }
  // }, [namedError, passwordError]);
  // const nameHandler = (e) => {
  //   setInputValue(e.target.value);
  //   if (e.target.value.length < 3 || e.target.value.length > 20) {
  //     setNamedError("incorrect name");
  //   } else {
  //     setNamedError("");
  //   }
  // };
  // const passHandler = (e) => {
  //   setInputValue(e.target.value);
  //   if (e.target.value.length < 3 || e.target.value.length > 9) {
  //     setPasswordError("incorrect pass");
  //   } else {
  //     setPasswordError("");
  //   }
  // };

  const submitHandler = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();

    Login(inputValue);
  };

  return (
    <div>
      <form onSubmit={submitHandler}>
        <div >
          {error !== "" ? <div className="error">{error}</div> : ""}
          <div>
            <p>User name</p>
            <input
              type="text"
              name="name"
              id="name"
              placeholder="Input user name"
              // onChange={(e) => nameHandler(e)}
              onChange={(e) =>
                setInputValue({ ...inputValue, name: e.target.value })
              }
              value={inputValue.name}
            />
          </div>
          <div>
            <p>Password</p>
            <input
              type="password"
              name="password"
              id="password"
              placeholder="Input password"
              // onChange={(e) => passHandler(e)}
              onChange={(e) =>
                setInputValue({ ...inputValue, password: e.target.value })
              }
              value={inputValue.password}
            />
          </div>
          <button
            // disabled={!formValid}
            type="submit"
          >
            Log In
          </button>
        </div>
      </form>
    </div>
  );
};

I tried onChange to turn it on individually. Each one works separately. But if you uncomment when, then not anymore. I don't know how to combine this onChange