React:Formik形式的物料UI单选按钮组重置不起作用

formik.resetForm() 正确重置值,但“材质UI”单选按钮组将不会正确重置:最后一个选定的单选按钮将保持选中状态。 提交后如何正确重置单选按钮组?

import { useFormik } from "formik";
import {
  Stack,
  Button,
  FormControl,
  FormControlLabel,
  FormGroup,
  FormHelperText,
  FormLabel,
  Radio,
  RadioGroup,
  TextField,
} from "@mui/material";

export default function App() {
  const players = ["player 1", "player 2"];
  const formik = useFormik({
    initialValues: {
      winner: "",
    },
    onSubmit: (values, { resetForm }) => {
      resetForm();
    },
  });
  return (
    <div className="App">
      <h1>Demo Radio Group Reset</h1>
      <h2>
        After pressing Save, the form will be reset, but the reset of the radio
        group does not work.
      </h2>
      <p>value: {formik.values.winner || "<empty>"}</p>
      <form onSubmit={formik.handleSubmit}>
        <Stack>
          <FormControl
            required
            error={formik.touched.winner && Boolean(formik.errors.winner)}
          >
            <FormLabel sx={{ textAlign: "left" }}>Winner</FormLabel>
            <RadioGroup
              row
              name="winner"
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
            >
              {players.map((player) => (
                <FormControlLabel
                  key={player}
                  value={player}
                  control={<Radio />}
                  label={player}
                />
              ))}
            </RadioGroup>
            <FormHelperText>
              {formik.touched.winner && formik.errors.winner}
            </FormHelperText>
          </FormControl>
          <Button variant="contained" type="submit">
            Save
          </Button>
        </Stack>
      </form>
    </div>
  );
}

请参阅上的运行示例 stackblitz