React电话号码输入格式和无格式输出

我正在尝试在输入中创建电话号码格式 下面的输出没有电话号码格式。 我还想添加一个条件,如果用户键入的条目超过10个,则输入中将不会有更多的电话格式。

另外,如果没有react number格式库,请让我知道有什么方法可以做到这一点。

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

class App extends Component {
  state ={
  userInput: ''
}


  inputChangedHandler = (event) => { 
   this.setState({userInput: event.target.value});
   }
  render() {
    return (
      <div className="App">
        <input type="number"
        name="phoneNumberInput"
        placeholder='Phone Number Here'
        onChange={this.inputChangedHandler}
        value={this.state.userInput}/>
        <p><strong>Value: </strong>+1{this.state.userInput}</p>
        <NumberFormat 
        format="(###) ###-####" mask=""
        name="phoneNumberInput"
        placeholder='Phone Number Here'
        onChange={this.inputChangedHandler}
        value={this.state.userInput}/>
        <p><strong>Value: </strong>+1{this.state.userInput}</p>
        </div>
    );
  }
}

export default App;