🌱 Typescript onChange event for form inputs

Your component’s props inherit onChange from HTMLProps, which expects a FormEvent. FormEvent types target a little differently to account for the fact that the event target can’t be known until runtime, so if you change FormInputProps.onChange to expect FormEvent:

onChange: (event: React.FormEvent<HTMLInputElement>) => void;

And then do the same for the argument in the onChange() method, you’ll get a new error complaining that target doesn’t have a property called value, but we can change that to currentTarget (which is preferable to target since it is the element that the handler’s actually attached to, rather than the source of the event) to fix:

onChange = (event: FormEvent<HTMLInputElement>) => {
  // ...
  const value = currentStep === 3 ? formatPhone(event.currentTarget.value) : event.currentTarget.value;
  // ...
}