Use this callback on all input's onChange prop, inputs must have proper type and name matching the state

onControlledInputChange.tsx

function Example() {
  const defaultInputValues = {
      name: "", // should match input's name prop
      email: "",
      address_line_1: "",
      birthday: "",
  }

  const [controlledFields, setControlledFields] = useState({
    ...defaultInputValues,
  })

  const onControlledInputChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      let value

      if (event.target.type === "number") {
        value = Number.isInteger(event.target.valueAsNumber)
          ? event.target.valueAsNumber
          : ""
      } else if (event.target.type === "text") {
        value = event.target.value
      } else if (event.target.type === "date") {
        value = event.target.valueAsDate
          ? formatInDateInUTC(new Date(event.target.valueAsDate), "yyyy-MM-dd")
          : ""
      } else {
        value = event.target.value
      }

      const newControlledValues = {
        ...controlledFields,
        [event.target.name]: value,
      }

      setControlledFields({
        ...newControlledValues,
        ...calculatedFieldsBasedOnNewControlledInputValues(newControlledValues),
      })
    },
    [
      setControlledFields,
      controlledFields,
      calculatedFieldsBasedOnNewControlledInputValues,
    ]
  )
  
  return <>...</>
}