Uncaught TypeError: Cannot read property 'attachToForm' of undefined

[bakhtawarsaleem]

I am receiving an error, cannot figure out why, below is code in which i called the custom inputValidator component which i have created

import React, { Component } from 'react';
import { ValidatorForm } from 'react-form-validator-core';
import InputValidator from '../../components/InputValidator'

class CreateUser extends Component {

  constructor(props) {
    super(props);
    this.state = {
      name: "",
    };
  }

  createUser = () => {
    console.log("User created")
  }

  updateName = (e) => {
    this.setState({
      name: e.target.value,
    })
  }

  render() {
    return (
    <ValidatorForm
      onSubmit={this.createUser}
    >
      <InputValidator
          onChange={this.updateName}
          name="name"
          value={this.state.name}
          validators={['required', 'isString']}
          errorMessages={['name is required', 'name is not valid']}
      />
      <button type="submit">submit</button>
    </ValidatorForm>
    )
  }
}
export default CreateUser

and my inputValidator component looks like this

import React from 'react';
import { ValidatorComponent } from 'react-form-validator-core';

class InputValidator extends ValidatorComponent {

  render() {
    const { errorMessages, validators, requiredError, validatorListener, ...rest } = this.props;

    return (
      <div>
        <input
          {...rest}
          ref={(r) => { this.input = r; }}
        />
        {this.errorText()}
      </div>
    );
  }

  errorText() {
    const { isValid } = this.state;

    if (isValid) {
        return null;
    }

    return (
      <div style={{ color: 'red' }}>
        {this.getErrorMessage()}
      </div>
    );
  }
}

export default InputValidator;

the error i am receiving is the following

my package.json is this

{
  "name": "my_app",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.1.1",
    "@babel/preset-react": "^7.10.4",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "bootstrap": "^4.4.1",
    "graphql": "^15.3.0",
    "jquery": "3.4.1",
    "popper.js": "^1.16.1",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-form-validator-core": "^1.0.0",
    "react-router-dom": "^5.2.0",
    "react_ujs": "^2.6.1",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.0"
  }
}

Please I need help with this

[NewOldMax]

@bakhtawarsaleem hi
this package was updated with breaking changes so usage was changed
see migration guide for details