我正在Map多个按钮，并希望选择第一个按钮以在渲染时选中，该值将在渲染时显示
这是axios得到的

const [productData, setProductData] = useState([]);
const [size, setSize] = useState([]);
const [choice, setChoice] = useState("");

useEffect(() => {
const checkId = parseInt(window.location.href.slice(-1));
axios.get(`http://localhost:5000/products?id=${checkId}`)
.then((response) => {
setProductData(response.data[0]);
setSize(response.data[0].size);
setChoice(response.data[0].size[0].calories);
});
}, []);

这是按钮Map

const GetSize = () => {
    return size.map((val, i) => {
      return (
        <>
          <div>
            <input
              onClick={(e) => {
                setChoice(val.calories);
              }}
              defaultChecked={i == 0}
              type="radio"
            />
            <p>{val.option}</p>
            <p>{val.cup}</p>
          </div>
        </>
      );
    });
  };

必须在这里显示一个渲染值

<div >
     <h1>{choice === 0 ? "" : choice}</h1
    <div>
       <h1>Size options</h1>
    </div>
    <div >
       <form>
          <GetSize />
        </form>
    </div>
</div>

型
在渲染时，{choice}不显示，只在我单击单选按钮时显示。
如何使{choice}等待setChoice运行
而且，按钮需要单击两次才能呈现为选中，但单击按钮一次就足以使{choice}呈现