Como confirmo a senha em formulários React com Simple Body Validator? [duplicado]

Estou trabalhando em um aplicativo de chat com React 18 e Firebase.

No src\pages\Register.jsxcomponente, tenho um formulário que valido com Simple Body Validator :

import React, { useState } from "react";
import FormCard from "../components/FormCard/FormCard";
import { make } from "simple-body-validator";

export default function Register() {
  const initialFormData = {
    firstName: "",
    lastName: "",
    email: "",
    password: "",
    password_confirmation: ""
  };

  const validationRules = {
    firstName: ["required", "string", "min:3", "max:255"],
    lastName: ["required", "string", "min:3", "max:255"],
    email: ["required", "email"],
    password: ["required"],
    password_confirmation: ["required"]
  };

  const validator = make(initialFormData, validationRules);
  const [formData, setFormData] = useState(initialFormData);
  const [errors, setErrors] = useState(validator.errors());

  const [pristineFields, setPristineFields] = useState(() =>
    Object.keys(initialFormData)
  );

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevFormData) => {
      const newFormData = { ...prevFormData, [name]: value };
      const newPristineFields = pristineFields.filter((f) => f !== name);

      validator.setData(newFormData).validate();
      const validationErrors = validator.errors();
      newPristineFields.forEach((f) => validationErrors.forget(f));
      setErrors(validationErrors);

      setPristineFields(newPristineFields);

      return newFormData;
    });
  };

  const handleSubmit = (event) => {
    event.preventDefault();

    if (!validator.setData(formData).validate()) {
      setErrors(validator.errors());
    }

    setPristineFields([]);
  };

  return (
    <FormCard title="Register">
      <form onSubmit={handleSubmit}>
        <div
          className={`mb-2 form-element ${errors.has("firstName") ? "has-error" : null
            }`}
        >
          <label for="firstName" className="form-label">
            First name
          </label>
          <input
            type="text"
            id="firstName"
            name="firstName"
            value={formData.firstName}
            onChange={handleChange}
            className="form-control form-control-sm"
          />
          {errors.has("firstName") ? (
            <p className="invalid-feedback">{errors.first("firstName")}</p>
          ) : null}
        </div>

        <div
          className={`mb-2 form-element ${errors.has("lastName") ? "has-error" : null
            }`}
        >
          <label for="lastName" className="form-label">
            Last name
          </label>
          <input
            type="text"
            id="lastName"
            name="lastName"
            value={formData.lastName}
            onChange={handleChange}
            className="form-control form-control-sm"
          />
          {errors.has("lastName") ? (
            <p className="invalid-feedback">{errors.first("lastName")}</p>
          ) : null}
        </div>

        <div
          className={`mb-2 form-element ${errors.has("email") ? "has-error" : null
            }`}
        >
          <label for="email" className="form-label">
            Email address
          </label>
          <input
            type="email"
            id="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            className="form-control form-control-sm"
          />
          {errors.has("email") ? (
            <p className="invalid-feedback">{errors.first("email")}</p>
          ) : null}
        </div>

        <div
          className={`mb-2 form-element ${errors.has("password") ? "has-error" : null
            }`}
        >
          <label for="password" className="form-label">
            Password
          </label>
          <input
            type="password"
            id="password"
            name="password"
            value={formData.password}
            onChange={handleChange}
            className="form-control form-control-sm"
          />
          {errors.has("password") ? (
            <p className="invalid-feedback">{errors.first("password")}</p>
          ) : null}
        </div>

        <div
          className={`mb-2 form-element ${errors.has("password_confirmation") ? "has-error" : null
            }`}
        >
          <label for="password_repeat" className="form-label">
            Confirm Password
          </label>
          <input
            type="password"
            id="password_repeat"
            name="password_confirmation"
            value={formData.password_confirmation}
            onChange={handleChange}
            className="form-control form-control-sm"
          />
          {errors.has("password_confirmation") ? (
            <p className="invalid-feedback">
              {errors.first("password_confirmation")}
            </p>
          ) : null}
        </div>

        <div className="pt-1">
          <button type="submit" className="btn btn-sm btn-success fw-bold">
            Submit
          </button>
        </div>
      </form>
    </FormCard>
  );
}

O problema

De acordo com meu entendimento dos documentos, a biblioteca de validação requer um campo password_confirmation para o campo Confirmar senha .

Mas se passworde password_confirmationnão corresponderem (por exemplo: "123" para senha e "1234" para senha_confirmação), não há erros de validação.

Questões

1. O que estou fazendo de errado?
2. Qual é a maneira mais confiável de corrigir o problema?