如何在reactJS中使单选按钮与useState一起使用？可能有多组单选按钮

如何解决如何在reactJS中使单选按钮与useState一起使用？可能有多组单选按钮

当我将单选按钮保存到状态时，不会在视觉上选择它们，但是状态总是会更新。在我的代码我想当选择了不同的无线电按钮删除的无线电波状态的对象。

状态得到更新，但是复选框似乎没有在视觉上被选中。该状态保存为插件状态。

  const [item,setItem] = useState(menuItem)
  const [addons,setAddons] = useState([])
  const [checkedItems,setCheckedItems] = useState([])

  document.body.style.overflow = 'hidden'

  
  const renderCustomizationProperties = (customization) => {
    let i = 1
    return customization.customizableProperties.map((property) => {
      if (customization.type === 'radio') {
        return (
          <div
            className="property-item"
            key={Math.floor(Math.random() * 4) + customization._id}
          >
            <div className="property-name">{property.name}</div>
            <div className="property-property">
              <div className="property-property--price">₹{property.price}</div>

              <div className="pretty p-default p-round">
                <input
                  type="radio"
                  className="radio"
                  value={i++}
                  name={customization._id}
                />
                <div className="state p-success-o">
                  <label></label>
                </div>
              </div>
            </div>
          </div>
        )
      } else if (customization.type === 'checkbox') {
        return (
          <div className="property-item" key={customization._id}>
            <div className="property-name">{property.name}</div>
            <div className="property-property">
              <div className="property-property--price">₹{property.price}</div>

              <div className="pretty p-default">
                <input
                  name={property.name}
                  type="checkbox"
                  checked={checkedItems.includes(property.name)}
                  onChange={(e) => {
                    if (e.target.checked) {
                      setCheckedItems([...checkedItems,e.target.name])
                      console.log(checkedItems)
                      addCustomizationsToBasket(property)
                    } else {
                      setCheckedItems(
                        checkedItems.filter(
                          (checkedItem) => checkedItem !== e.target.name
                        )
                      )
                      removeCustomizationsToBasket(property)
                    }
                  }}
                />
                <div className="state p-success">
                  <label></label>
                </div>
              </div>
            </div>
          </div>
        )
      }
    })
  }