【React】選択されたラジオボタンのvalue属性の値を取得(判定)する方法

import { useState } from "react";

function App() {
  const RADIO_VALUES = ["A", "B", "C"];

  // 注目ポイント②
  const [selectedRadioBtnValue, setSelectedRadioBtnValue] = useState("");
  
  // 注目ポイント③
  const onRadioBtnChanged = (e) => setSelectedRadioBtnValue(e.target.value);

  return (
    <>
      <p>選択されたラジオボタン：{selectedRadioBtnValue}</p>

      {/* 注目ポイント① */}
      {RADIO_VALUES.map((radioValue) => (
        <label key={radioValue}>
          <input
            type="radio"
            value={radioValue}
            name="sample"
            onChange={onRadioBtnChanged}
          />
          {radioValue}
        </label>
      ))}
    </>
  );
}

export default App;

{RADIO_VALUES.map((radioValue) => (
  <label key={radioValue}>
    <input
      type="radio"
      value={radioValue}
      name="sample"
      onChange={onRadioBtnChanged}
    />
    {radioValue}
  </label>
))}

const [selectedRadioBtnValue, setSelectedRadioBtnValue] = useState("");

const onRadioBtnChanged = (e) => setSelectedRadioBtnValue(e.target.value);

import { useState } from "react";

function App() {
  const RADIO_VALUES = ["A", "B", "C"];

  // 変更点①
  const [selectedRadioBtnValue, setSelectedRadioBtnValue] = useState("B");

  const onRadioBtnChanged = (e) => setSelectedRadioBtnValue(e.target.value);

  return (
    <>
      <p>選択されたラジオボタン：{selectedRadioBtnValue}</p>

      {RADIO_VALUES.map((radioValue) => (
        <label key={radioValue}>
          <input
            type="radio"
            value={radioValue}
            name="sample"
            onChange={onRadioBtnChanged}
　　　　// 変更点②
            checked={radioValue === selectedRadioBtnValue}
          />
          {radioValue}
        </label>
      ))}
    </>
  );
}

export default App;