I have a problem with validating a form in react. I have a register form in my react beginner project as follows:

import React from "react";
import Form from "./common/form";
import { Joi } from "joi-browser";
import * as userService from "../services/userService";
class RegisterForm extends Form {
  state = {
    data: { username: "", password: "", name: "" },
    errors: {}
  };
  schema = {
    username: Joi.string().required().email().label("Username"),
    password: Joi.string().required().min(5).max(15).label("Password"),
    name: Joi.string().required().label("Name")
  };

  doSubmit = async () => {
    await userService.registerUser(this.state.data);
  };

  render() {
    return (
      <div>
        <h1>Register</h1>
        <form onSubmit={this.handleSubmit}>
          {this.renderInput("username", "Username", "email")}
          {this.renderInput("password", "Password", "password")}
          {this.renderInput("name", "Name")}
          {this.renderButton("Register")}
        </form>
      </div>
    );
  }
}

export default RegisterForm;

as you can see i am using joi-browser package for validating my inputs but on the front i have the following error:

TypeError: Cannot read properties of undefined (reading 'string') new RegisterForm E:/computer/Web/React,js/06 - Routing (00h53m)/1- Resources/Resources/Section 6- Routing/start/vidly/src/components/registerForm.jsx:11 8 | errors: {} 9 | }; 10 | schema = {

11 | username: Joi.string().required().email().label('Username'), 12 | password: Joi.string().required().min(5).max(15).label('Password'), 13 | name: Joi.string().required().label("Name") 14 | };

please help me anyone