[AntDesign] [Next.js] チェックボックス型のフォームが書きかわらない

Next.js + AntDesignでフォームを実装中に
チェックボックス型のフォームを実装している時にはまった時の備忘録。
チェックボックスを変更してもフォームのvaluesが書き変わらなかった。

原因

FormでonValuesChangeが指定されている状態で
Form.ItemにvaluePropName="checked"を指定していたため、
formのvaluesの中の"hoge"が書きかわらなかった。

修正したコード

FormにonValuesChangeを指定するのをやめ、
Form.Item内でonChangeを指定するよう変更した。

Before

const [form] = Form.useForm() 
...
<Form form={form} onFinish={onFinish} onValuesChange={handleChangeFuga}>
  <Form.Item
    name="hoge"
    valuePropName="checked"
    initialValue
  >
    <Checkbox>
        Hoge
    </Checkbox>
  </Form.Item>

  <Form.Item
    name="fuga"
  >
    ...
  </Form.Item>
</Form>

After

const [form] = Form.useForm() 
...
 <Form form={form} onFinish={onFinish}>
  <Form.Item
    name="hoge"
    valuePropName="checked"
    initialValue
  >
    <Checkbox>
        Hoge
    </Checkbox>
  </Form.Item>

  <Form.Item
    name="fuga"
    onChange={handleChangeFuga}
  >
    ...
  </Form.Item>
</Form>