title: Formatting and Setting Phone Number in input field in reactjs
body: <p>Hello I am quite a beginner in reactjs.</p>
  
  <p>My current use case is very simple, I have an input field that is to accept a phone number and format it as the user is typing.Unfortunately it turns out that the input fields freezes and refuses to accept further inputs as I start formatting</p>
  
  <p>Here is my code</p>
  
  <pre><code>import { parsePhoneNumberFromString } from 'libphonenumber-js';
  
  export default function UpdatePhoneDetails() {
    const [phoneNumber, setPhoneNumber] = useState('');
  
    const updatePhoneNumber = (value) =&gt; {
      const newPhoneNumber = parsePhoneNumberFromString(value, 'NG');
      if (newPhoneNumber) {
        const formattedNumber = newPhoneNumber.number;
        const valid = newPhoneNumber.isValid();
        if (valid) {
          setPhoneNumber(formattedNumber); //The input field seems to be freezing here
        }
      }
    };
  
    return (
      &lt;TextField
        variant="outlined"
        required
        fullWidth
        id="phonenumber"
        label="Phone Number"
        name="phonenumber"
        autoFocus
        value={phoneNumber}
        defaultValue={phoneNumber}
        disabled={updating}
        autoComplete="phonenumber"
        onChange={(event) =&gt; updatePhoneNumber(event.target.value)}
      /&gt;
    );
  }
  </code></pre>
  
  <p>Thanks for your anticipated help.</p>