Can you make an input with mask and validation in React?

I'm using several different components and trying to integrate them. In this example I used react-input-mask and react-material-ui-form-validator, I'm using the inputs of the ui material. Does anyone know how to make these components work on a single component? My intention is to make a form with phone, cpf and cep. Where all would have an Ex mask: (xxx) _ _ _ _ _ _ _ _ _ and would have error messages when the form was submitted. Ex: The field is required. (if the field is not filled)

Below is an attempt, if someone has already managed to do something similar to the purpose described above "in bold" or even have some component that does it at once, if you can share thank you.

link

link

link

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;