Reactjs 用户输入值时更改值

我收集了用于在CSS中转换单位的代码，当用户更改输入中的值时，输入也会更改.下面的代码是如何工作的？在函数NumberInput中，我哪里出错了，请告诉我！我是一个react 的新手:D

在codesandbox上执行的代码.

import React from 'react'
import { ListType } from './types'

export default function CssUnits() {
  const [em, setEm] = React.useState<number>(1)
  ...

  const emHandler = (val: number) => {
    setRem(val)
    setPx(val * 16)
    setPercent(val * 100)
    setPt(val * 12)
  }
  ...

  const List: ListType[] = [
    {
      label: 'EM',
      description: 'Relative to the font-size of the element',
      state: em,
      onChange: (val) => {
        emHandler(val || 0)
      },
    },
    ...
  ]

  function NumberInput({ key, value, variant, label, description, onChange, precision }) {
    return (
        <div key={key} className="my-8">
            <div className="text-xl font-medium">{label} <span className="text-sm text-gray-400">({description})</span></div>
            <input type='text' value={value} onChange={onChange}/>
        </div>
    );
  }
  
  return (
    <div className="my-4">
      <h2>CSS Units converter</h2>
        {List.map((item, index) => {
          const decimalPoint = item.state.toString().split('.')
          return (
            <NumberInput
              key={index}
              value={item.state}
              variant='default'
              label={item.label}
              description={item.description}
              onChange={item.onChange}
              precision={decimalPoint[1] ? decimalPoint[1].length : 0}
            />
          )
        })}
    </div>
  )
}