Password Confirm field showing error as must be one of [ref:password]

React
1

I am learning React’s Form section and on the form on the tutorial, there is only using a single field for password on the registration form. However, I am trying to add the ``password_confirm` field but, it is showing an error:

"password_confirm" must be one of [ref:password]

My code Looks like:

import React, { Component } from "react";
import Joi from "joi-browser";
import Input from "./input";

class Form extends Component {
  state = {
    data: {},
    errors: {},
  };

  validate = () => {
    const { error } = Joi.validate(this.state.data, this.schema, {
      abortEarly: false,
    });
    if (!error) return null;

    const errors = {};
    for (let item of error.details) {
      errors[item.path[0]] = item.message;
    }
    return errors;
  };

  validateProperty = (input) => {
    console.log("data >>", this.state.data);
    const obj = { [input.name]: input.value };
    const schema = { [input.name]: this.schema[input.name] };
    const { error } = Joi.validate(obj, schema);
    return error ? error.details[0].message : null;
  };

  handleSubmit = (e) => {
    e.preventDefault();
    const errors = this.validate();
    this.setState({ errors: errors || {} });

    if (errors) return;
    this.doSubmit();
  };

  handleChange = ({ currentTarget: input }) => {
    const errors = { ...this.state.errors };
    const errorMessage = this.validateProperty(input);
    if (errorMessage) {
      errors[input.name] = errorMessage;
    } else {
      delete errors[input.name];
    }

    const data = { ...this.state.data };
    data[input.name] = input.value;
    this.setState({ data, errors });
  };

`  /**`
       *render input fild using theme design
       * @param {string} name
       * @param {string} label
       * @param {string} type
       */
      renderInputField(name, label, type = "text") {
        const { data, errors } = this.state;
        return (
          <Input
            label={label}
            name={name}
            value={data[name]}
            onChange={this.handleChange}
            id={name}
            placeholder={"Enter " + label}
            type={type}
            error={errors[name]}
          />
        );
      }

  /**
   *
   * @param {string} label
   * @param {string} classList
   */
  renderSubmitButton(label, classList = "") {
    return (
      <button
        disabled={this.validate()}
        className={"btn " + classList}
        type='submit'
      >
        {label}
      </button>
    );
  }
}

export default Form;