Conditional Phone Mask numbers in ReactJS as an if statement or function

I am trying to have my input be shown as the US phone number format until I reach the 10th input. Once I reach the 11th input I would like to have it lose the mask format.

attached is my ReactJS code:

import React, { Component } from 'react';
import NumberFormat from 'react-number-format';

class App extends Component {
  state ={
  userInput: ''
}
phoneNumberFormatHandler =(values, event)=>{
console.log("values are " + values);
console.log("events are " + event);
}

  inputChangedHandler = (values, event) => { 
   this.setState({userInput: values});
  console.log(values);
  console.log(event);
  console.log(this.formatPhoneNumber(values.value));
  }
  render() {
    return (
      <div className="App">
                <NumberFormat
            // format={this.phoneNumberFormatHandler}
            mask=""
            name="phoneNumberInput"
            placeholder="Phone Number Here"
            onValueChange={this.inputChangedHandler}
            value={this.state.userInput.value}
          />
<p><strong>Value: </strong>+1{this.state.userInput.value}</p>
        </div>
    );
  }
}

export default App;