Can you input masking and validation in React?

Question

I am using several different Components and trying to integrate them. In this example here I used React-input-Mask and React-material-ui-form-Validator, I am using the material-ui inputs. Does anyone know how to make these Components work in a single Component? My intention is to make a form with phone, Cpf and zip. Onde todos teriam uma máscara Ex: (xxx) _ _ _ _- _ _ _ _ e teriam mensagens de erro quando o form fosse submitado. Ex: O campo é obrigatório. (if the field is not filled in)

Below is an attempt, if someone has already managed to do something similar to the goal described above "in bold" or even has some Component to do it at once, if you can share thanks.

https://material-ui-next.com/demos/text-fields/

https://github.com/sanniassin/react-input-mask

https://github.com/NewOldMax/react-material-ui-form-validator

import React from 'react';
import {
Grid, withStyles
} from 'material-ui';
import { TextValidator, ValidatorForm } from 'react-material-ui-form- 
validator';
import { ValidatorComponent } from 'react-form-validator-core';
import InputMask from 'react-input-mask';


class FormMaskVal extends React.Component {

constructor(props) {
super(props);

this.state = {
    formData: {
       name:''
    }
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}


handleChange(event) {
 const { formData } = this.state;
 formData[event.target.name] = event.target.value;
 this.setState({ formData });
}

handleSubmit() {
 this.setState({ submitted: true }, () => {
    setTimeout(() => this.setState({ submitted: false }), 5000);
 });
}
render(){
  const { formData, submitted, alignItems, direction, justify} = 
  this.state;
  const validations = {
    ID: ["required"]
  }

const OurMaskedInput = (props) => {
 const classes = props.classes;

 return (
 <div>
  <MaskedInput
    mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', 
    /\d/, /\d/, /\d/, /\d/]}
    placeholderChar={'\u2000'}
    showMask
    className={classes.maskedInput}
    />
  </div>
 );
};


return (
  <ValidatorForm
      ref="form"
      onSubmit={this.handleSubmit}>
 <ItemGrid xs={12} sm={12} md={12}>
   <TextValidator                                                    
     className="CustomInput"
     onChange={this.handleChange}
     name="ID"
     type="number"
     label="ID"
     value={formData.ID}
     validators={['required']}
     errorMessages={['Is required']}
     InputProps={{ inputComponent: OurMaskedInput }}
    />
 </ItemGrid>
 <Button 
   color="primary"
   type="submit"
   label={
     (submitted && 'Your form is submitted!')
     || (!submitted && 'Submit')
   }
   disabled={submitted}
   >
    Send
  </Button>
</ValidatorForm>
)
}

export default FormMaskVal;