React のフォームでもし何も入力してなかったら送信時にalertの文字を追加する方法

現在Reactのバリデーションで苦戦しております。
やりたい実装は、このようにもし何も入力してなかったらこの<p>必須項目が空欄です</p>のPタグを表示できる実装をしたいです。

現在、オブジェクトとReactHooksを使って値を管理しております。

import React, { useState } from "react";
import Input from "../../components/UI/Input/Input";
import Button from "../../components/UI/Button/Button";
import classes from "./Auth.module.css";
const Auth = () => {
  const [authForm, setAuthForm] = useState({
   username: {
      elementType: "input",
      elementConfig: {
        type: "name",
        placeholder: "name"
      },
      value: "",
      validation: {
        required:false,
        isEmail: true
      },
      valid: false,
      touched: false
    },
    password: {
      elementType: "input",
      elementConfig: {
        type: "password",
        placeholder: "Password"
      },
      value: "",
      validation: {
        required: true,
        minLength: 6
      },
      valid: false,
      touched: false
    }
  });

  const checkValidity = (value, rules) => {
    let isValid = true;
    if (!rules) {
      return true;
    }
    if (rules.required) {
      isValid = value.trim() !== "" && isValid;
    }
    if (rules.minLength) {
      isValid = value.length >= rules.minLength && isValid;
    }
    if (rules.maxLength) {
      isValid = value.length <= rules.maxLength && isValid;
    }
    return isValid;
  };

  const inputChangedHandler = (event, controlName) => {
    const updatedControls = {
      ...authForm,
      [controlName]: {
        ...authForm[controlName],
        value: event.target.value,
        valid: checkValidity(
          event.target.value,
          authForm[controlName].validation
        ),
        touched: true
      }
    };
    setAuthForm(updatedControls);
  };

  const formElementsArray = [];
  for (let key in authForm) {
    formElementsArray.push({
      id: key,
      config: authForm[key]
    });
  }
  const form = formElementsArray.map(formElement => (
    <Input
      key={formElement.id}
      label={formElement.type}
      elementType={formElement.config.elementType}
      elementConfig={formElement.config.elementConfig}
      value={formElement.config.value}
      invalid={!formElement.config.valid}
      shouldValidate={formElement.config.validation}
      touched={formElement.config.touched}
      changed={event => inputChangedHandler(event, formElement.id)}
    />
  ));
  return (
    <div className={classes.Auth}>
      <form>
        {form}
        <Button btnType="Success">SUBMIT</Button>
      </form>
    </div>
  );
};
export default Auth;

const Input = (props: any) => {
  let inputElement = null;

  switch (props.elementType) {
    case "input":
      inputElement = (
        <React.Fragment>
          <label className="form-label">
            {props.elementConfig.label} <span className="required">必須</span>
          </label>
          <input
            className="form-input"
            {...props.elementConfig}
            value={props.value}
            onChange={props.changed}
            onKeyDown={props.onKeyPressed}
          />
          {props.required === true ? (
            <p className="form-input__error">必修項目が空欄です</p>
          ) : null}
        </React.Fragment>
      );
      break;

送信ボタンをクリックしたら

validation:{
required:true
}
に変更してもエラーが起きてうまくいきません。