title: formatting number in input react
body: <p>I have made an <code>Input</code> component. If it is a number I want to format it correctly, like a currency. I.e. <code>4000</code> would be <code>4,000</code>.</p>
  
  <p>Here is a <a href="https://codesandbox.io/s/kxz7njpo67" rel="nofollow noreferrer">codesandbox</a>.</p>
  
  <p>I am having issues with displaying and updating this.</p>
  
  <pre><code>&lt;Input initialValue={'400000000'} isNumber={true} /&gt;
  </code></pre>
  
  <p>My <code>Input</code> component looks like this.</p>
  
  <pre><code>type Props = {
      initialValue?: string;
      isNumber?: boolean;
  };
  
  const Input = ({ initialValue = '', isNumber }: Props) =&gt; {
      const [value, updateValue] = useState(initialValue);
  
      const update = (val: any) =&gt; {
          if (isNumber) {
              const x = Number(val);
              updateValue(x.toLocaleString());
          } else {
              updateValue(val);
          }
      };
  
      return (
          &lt;StyledInput
              type="text"
              value={value}
              onChange={e =&gt; update(e.target.value)}
          /&gt;
      );
  };
  </code></pre>
  
  <p>I am seeing an error NaN in my input component. Anyone have any ideas?</p>