Нужно добавить валидацию формы ReactJS

[countryman]

Помогите пожалуйста доделать форму.
необходима проверка на введённые символы, например (if (e.target.value.length < 3 || e.target.value.length > 20))
В форме есть реагирующий button, что бы тоже срабатывал под это условие. И если можно также прикрутить стили для input под эти же условия.

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 [formValid, setFormValid] = useState(true);

  const validate = ({ name, password }) => {

    // проверка валидности
    const nameIsValid = name;
    const passIsValid = password;

    const isCredentialsValid = nameIsValid && passIsValid;
    if (isCredentialsValid !== formValid) setFormValid(isCredentialsValid);
  };

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

    Login(inputValue);
  };

  const changeHandler = ({ currentTarget }: FormEvent<HTMLInputElement>) => {
    const { value, name } = currentTarget;
    setInputValue((prev) => {
      const formValues = { ...prev, [name]: value };
      validate(formValues);
      return formValues;
    });
  };

  return (
    <div className="block__login">
      <form onSubmit={submitHandler}>
        <div>
          {error !== "" ? <div>{error}</div> : ""}
          <div>
            <p>User name</p>
            <input
              className="block__login block__login__name"
              type="text"
              name="name"
              id="name"
              placeholder="Input user name"
              onChange={changeHandler}
              value={inputValue.name}
            />
          </div>
          <div>
            <p>Password</p>
            <input
              className="block__login block__login__pass"
              type="password"
              name="password"
              id="password"
              placeholder="Input password"
              onChange={changeHandler}
              value={inputValue.password}
            />
          </div>
          <button
            className="block__login block__login__btn"
            disabled={!formValid}
            type="submit"
          >
            Log In
          </button>
        </div>
      </form>
    </div>
  );
};