TypeScript React Beauty in the Eye of the Handler

Compare these two TypeScript components with their handlers. One uses function composition to produce handlers with required inline type signatures because typescript cannot infer their usage, and the other just requires repeating the same line a couple of times. Which one do you prefer?

function HeightWidthComponent() {
  const [width, setWidth] = useState(512)
  const [height, setHeight] = useState(332)

  const handler = (
    e: React.ChangeEvent<HTMLInputElement>,
    fn: React.Dispatch<React.SetStateAction<number>>
  ) => fn(parseInt(e.currentTarget.value, 10))

  const widthHandler = (e: React.ChangeEvent<HTMLInputElement>) => handler(e, setWidth)
  const heightHandler = (e: React.ChangeEvent<HTMLInputElement>) => handler(e, setHeight)

  return (
    <div>
      <input type='number' name='width' min={320} defaultValue={512} onChange={widthHandler} step={1} />
      <input type="number" name="height" min={258} defaultValue={332} onChange={heightHandler} step={1} />
    </div>
  )
}

function HeightWidthComponent() {
  const [width, setWidth] = useState(512)
  const [height, setHeight] = useState(332)

  const widthHandler = (e) => {
    setWidth(parseInt(e.currentTarget.value, 10))
  }

  const heightHandler = (e) => {
    setHeight(parseInt(e.currentTarget.value, 10))
  }

  return (
    <div>
      <input type='number' name='width' min={320} defaultValue={512} onChange={widthHandler} step={1} />
      <input type="number" name="height" min={258} defaultValue={332} onChange={heightHandler} step={1} />
    </div>
  )
}

And my personal preference here, while I love TypeScript, is this much simpler untyped JavaScript version of both.

function HeightWidthComponent() {
  const [width, setWidth] = useState(512)
  const [height, setHeight] = useState(332)

  const handler = (e, fn) => fn(parseInt(e.currentTarget.value, 10))

  const widthHandler = e => handler(e, setWidth)
  const heightHandler = e => handler(e, setHeight)

  return (
    <div>
      <input type='number' name='width' min={320} defaultValue={512} onChange={widthHandler} step={1} />
      <input type="number" name="height" min={258} defaultValue={332} onChange={heightHandler} step={1} />
    </div>
  )
}

Tagged