Javascript 在reacthookform状态中存储按钮组的选定值

我正在try 将MUI按钮组中的选定值保存到Reaction-Hook-Form的状态，但遇到一些问题--该值没有正确更新.

codesandbox link here个

以下是我的代码的一个通用版本:

import { ButtonGroup, Button } from '@mui/material'
import { useForm, Controller } from 'react-hook-form'

export default function MyComponent() {
  const { control, setValue, getValues } = useForm()

  const options = ['Option1', 'Option2', 'Option3']

  return (
    <Controller
      name="selectedOption"
      control={control}
      render={({ field }) => (
        <ButtonGroup>
          {options.map((option) => {
            return (
              <Button
                key={option}
                variant={field.value === option ? 'contained' : 'outlined'}
                onClick={() => {
                  setValue('selectedOption', option)  {/* this trick didn't work */}
                }}
              >
                {option}
              </Button>
            )
          })}
        </ButtonGroup>
      )}
    />
  )
}

我用了setValue('selectedOption', option)，但我不确定这是不是一种很好的做法.

我面临的问题是，当我单击Button Group中的按钮时，我希望表单状态中的selectedOption值更新为所单击按钮的值.然而，getValues方法似乎并不能反映更新后的状态.

这里的问题可能是什么？当按钮组中的某个按钮被单击时，我如何才能成功地更新和检索选定的Option值？

提前感谢您的帮助！