<pre class="shiki github-dark shaku"><code>import React from 'react'export function PhoneNumberInput() { // your code here let [value,setValue] = React.useState&lt;string&gt;(""); let formatNumber = (e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; { let phoneNumber = e.target.value.replace(/\D/g,''); if(phoneNumber.length &gt; 10) phoneNumber = phoneNumber.slice(0,10) if(phoneNumber.length &gt; 6) phoneNumber = `${phoneNumber.slice(0,6)}-${phoneNumber.slice(6)}` if(phoneNumber.length &gt; 3) phoneNumber = `(${phoneNumber.slice(0,3)})${phoneNumber.slice(3)}` setValue(phoneNumber); } return &lt;input data-testid="phone-number-input" value={value} onChange={formatNumber}/&gt;}// if you want to try your code on the right panel// remember to export App() component like below// export function App() {// return &lt;div&gt;your app&lt;/div&gt;// }</code></pre>

o(n)

Stripe

LeetCode

Create a PhoneNumberInput component. 1. only accepts numerical digits 2. format the number automatically as (123)456-7890 by * adding the parenthesis …