React - 将不同的寄存器放置到同一组件

Question

我有一个组件在一周的天数上呈现一个 ToggleButton，我在一个表单上调用这个组件两次。

const weekDays = [ 'Mon', 'Tue', 'Wen', 'Thu', 'Fri', 'Sat', 'Sun'];

export const ToggleDaysButtons = ({ indi, register }) => {
  return (
  <ToggleButtonGroup name="options" className="d-flex w-50" type="checkbox" { ...register(indi) } >
        {
            weekDays.map( (day,index) =>
                <ToggleButton name="options" variant='outline-success' key={day} id={`${day}-${indi}`} value={day}>
                    {day}
                </ToggleButton>
            )
        }
    </ToggleButtonGroup>
  )
}

我向这个组件发送了一个名为 indi 的道具，它具有接收寄存器的名称，但是当我与这个组件交互时，我收到以下错误。

错误：

未捕获（承诺）类型错误：无法读取未定义的属性 （读“名字”）

这是次要的，但我想给它一个解决方案，因为我对 react-hook-form 没有太多经验，并且作为初始状态，我收到以下对象：

"{\"Mon\":1,\"Tue\":0,\"Wen\":0,\"Thu\":1,\"Fri\":0,\"Sat\":0,\"Sun\":1}"

进入编辑模式时如何将这些值绑定到组件？。感谢阅读和帮助。

更新 我不得不更改代码，因为在上面我无法将它与对象传递的默认属性链接起来，但是问题仍然存在，无法将 react-hook-form 与该组件链接起来，而且按钮保持活动状态使用默认值。

const [objecDefaultDays, setObjecDefaultDays] = useState({
  Lun: 1,
  Mart: 0,
  Mier: 1,
  Jue: 0,
  Vie: 1,
  Sab: 0,
  Dom: 1,
});
  
const handleChecked = (e) => {
  const { id } = e.target;
  const [day] = id.split('-');
  
  setObjecDefaultDays({
    ...objecDefaultDays,
    [day]: objecDefaultDays[day] === 1 ? 0 : 1,
  });
};
  
return (
  <ToggleButtonGroup className="d-flex w-50" type="checkbox">
    {Object.keys(objecDefaultDays).map((day, index) => {
      const value = objecDefaultDays[day];
      console.log(day, value);
      console.log('____________________');
      return (
        <ToggleButton
          key={index}
          value={`${day}-${indi}`}
          checked={value}
          id={`${day}-${indi}`}
          onChange={ handleChecked }
          variant="outline-success"
        >
          {day}
        </ToggleButton>
      );
    })}
  </ToggleButtonGroup>
);