从react js中的数组列表中取消选择单选按钮

import React, { useState } from 'react';

const RadioButtonList = () => {
  const [selectedItem, setSelectedItem] = useState(null);

  const handleRadioButtonChange = (event) => {
    setSelectedItem(event.target.value);
  };

  const handleCancelButtonClick = () => {
    setSelectedItem(null);
  };

  return (
    <div>
      <ul>
        <li>
          <input
            type="radio"
            value="option1"
            checked={selectedItem === "option1"}
            onChange={handleRadioButtonChange}
          />
          Option 1
        </li>
        <li>
          <input
            type="radio"
            value="option2"
            checked={selectedItem === "option2"}
            onChange={handleRadioButtonChange}
          />
          Option 2
        </li>
        <li>
          <input
            type="radio"
            value="option3"
            checked={selectedItem === "option3"}
            onChange={handleRadioButtonChange}
          />
          Option 3
        </li>
      </ul>
      <button onClick={handleCancelButtonClick}>Cancel Selection</button>
    </div>
  );
};

export default RadioButtonList;