Formatting Input Field onChange While Retaining Value

I am trying to format the value of an input field onChange. I am wanting to add a space after every 4th character (i.e. a credit card number). It is currently clearing the text field after the 5th character (which is technically the space).

This is what I have done and how to reproduce the above.

const [creditCardNumber, setCreditCardNumber] = useState<string>('');
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {

   let creditNum = e.target.value;
   let creditNumSpaced = creditNum.match(/.{1,4}/g);
   setCreditCardNumber(creditNumSpaced?.join(' ') ?? '');
};


<Input type='number' onChange={e => handleChange(e)} value={creditCardNumber}