react-number-format Showing Format On inserting value
I have used this package for the Phone Input format
import { PatternFormat } from 'react-number-format';

<PatternFormat 
   value={value} 
   className='form-control'   
   format="(###) ###-####" 
 />

Due to this format whenever I add any single value, The formatted value show in the input. before the value reaches there.

I want to show the value in This format but when the value reaches there,
when I have entered only a single value it should not show that '-' there.
I want something like below

This is the link to the npm package I am using:
https://s-yadav.github.io/react-number-format/docs/intro

react-number-format Showing Format On inserting value
You could build the pattern diffrent if the value reaches said length then change   (empty space) for a - (dash)
import { PatternFormat } from 'react-number-format';

let pattern;
if (value.length >= 9) {
    pattern = "(###) ###-####";
} else {
    pattern = "(###) ### ####";
}

<PatternFormat 
   value={value} 
   className='form-control'   
   format={pattern} 
 />


