How use imask in NEXT JS

How i can use imask in NEXT JS for validation client phone :

$npm i react-imask and $npm install imask

import IMask from 'imask'
import  useIMask  from 'react-imask';

class IMask implements IMask {
}

    const phoneEl = useRef(null)
    let phoneMask = phoneEl
    let maskOptions = {
        mask:'+{4}(000)000-00-00',
    }
    let mask= new IMask(phoneMask, maskOptions)

and

return <>        

<label htmlFor="phone" className="form-label"></label>         

   <input type="text" className="phone" name="phone" ref={phoneEl}  placeholder="+4(***)-***-**-**"                  required   value={phone}   onChange={event => setPhone(event.target.value)} />  

</>

I want to validate the phone, for some reason the regex didn't work for me pattern="/+4(\d{3})\d{3}-\d{2}-\d{2}/". Then I started using imask js , but in jsx I don’t know how it works through

I want to validate the phone, for some reason the regex didn't work for me pattern="/+4(\d{3})\d{3}-\d{2}-\d{2}/". Then I started using imask js , but in jsx I don’t know how it works through