不确定如何将单选按钮组添加到也使用材质 UI 的预先存在的 Formik 表单中

问：

我是 REACT 的新手，我正在尝试通过修改现有示例来学习： 在这里，我正在遵循一个同时使用 Formik 和 Material UI 的教程，我正在努力将文本输入框更改为单选组选择

<TextField
                  label="Skill Level"
                  onBlur={handleBlur}
                  onChange={handleChange}
                  value={values.skillLevel}
                  name="skillLevel"
                  error={
                    Boolean(touched.skillLevel) && Boolean(errors.skillLevel)
                  }
                  helperText={touched.skillLevel&& errors.skillLevel}
                  sx={{ gridColumn: "span 4" }}
                />

如何更改代码以添加单选按钮？我只想在男性和女性或不同的预定义技能水平（初级、中级、高级）之间进行选择。

<div id="my-radio-group">Picked</div>
          <div role="group" aria-labelledby="my-radio-group">
            <label>
              <Field type="radio" name="picked" value="One" />
              One
            </label>
            <label>
              <Field type="radio" name="picked" value="Two" />
              Two
            </label>
            <div>Picked: {values.picked}</div>
          </div>

这是 Formik 网站上的示例，但我想将其合并到该材料 UI 包装器中

谁能帮忙？ 非常感谢！

我在网上搜索并尝试使用 ChatGPT 来获取一些示例，但没有一个完全符合我想要做的事情。找到一个类似的例子有点令人生畏。