Error when submitting form via Ant Design's useModalForm.

Converting circular structure to JSON --> starting at object with constructor 'HTMLSpanElement' | property '__reactFiber$xj14eaifikr' -> object with constructor 'FiberNode' --- property 'stateNode' closes the circle

Converting circular structure to JSON --> starting at object with constructor 'HTMLSpanElement' | property '__reactFiber$xj14eaifikr' -> object with constructor 'FiberNode' --- property 'stateNode' closes the circle

// ... Imports 

export default function CreateNoteModal() {
const {
modalProps: createModalProps,
formProps: createFormProps,
show,
close,
submit,
} = useModalForm<INote>({
resource: 'notes',
action: 'create',
});

const { selectProps: userSelectProps } = useSelect({
resource: 'users',
optionLabel: 'full_name',
optionValue: 'id',
});
const { selectProps: firmSelectProps } = useSelect({
resource: 'firms',
});
const { selectProps: categorySelectProps } = useSelect<ICategory>({
resource: 'note_categories',
});

return (
<>
<Button onClick={() => show()} type='primary'>
<Space align='center'>
<PlusCircle className='relative w-4 h-4 top-1' /> Create note
</Space>
</Button>
<Modal
{...createModalProps}
centered
width={1400}
footer={[
<Button key='add_new' type='primary' onClick={submit}>
Add new note
</Button>,
,
]}
>
<Form {...createFormProps} layout='vertical'>
<Title level={4}>Tie note to user or firm</Title>
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
<Col span={12}>
<Form.Item label='User' name='user_id'>
<Select {...userSelectProps} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label='Firm' name='firm_id'>
<Select {...firmSelectProps} />
</Form.Item>
</Col>
</Row>
<Divider />
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
<Col span={12}>
<Form.Item
label='Title'
name='title'
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label='Category' name='category'>
<Select {...categorySelectProps} />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label='Content'
name='content'
rules={[
{
required: true,
},
]}
>
<TextArea rows={4} />
</Form.Item>
</Col>
</Row>
</Form>
</Modal>
</>
);
}

// ... Imports 

export default function CreateNoteModal() {
const {
modalProps: createModalProps,
formProps: createFormProps,
show,
close,
submit,
} = useModalForm<INote>({
resource: 'notes',
action: 'create',
});

const { selectProps: userSelectProps } = useSelect({
resource: 'users',
optionLabel: 'full_name',
optionValue: 'id',
});
const { selectProps: firmSelectProps } = useSelect({
resource: 'firms',
});
const { selectProps: categorySelectProps } = useSelect<ICategory>({
resource: 'note_categories',
});

return (
<>
<Button onClick={() => show()} type='primary'>
<Space align='center'>
<PlusCircle className='relative w-4 h-4 top-1' /> Create note
</Space>
</Button>
<Modal
{...createModalProps}
centered
width={1400}
footer={[
<Button key='add_new' type='primary' onClick={submit}>
Add new note
</Button>,
,
]}
>
<Form {...createFormProps} layout='vertical'>
<Title level={4}>Tie note to user or firm</Title>
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
<Col span={12}>
<Form.Item label='User' name='user_id'>
<Select {...userSelectProps} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label='Firm' name='firm_id'>
<Select {...firmSelectProps} />
</Form.Item>
</Col>
</Row>
<Divider />
<Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
<Col span={12}>
<Form.Item
label='Title'
name='title'
rules={[
{
required: true,
},
]}
>
<Input />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label='Category' name='category'>
<Select {...categorySelectProps} />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item
label='Content'
name='content'
rules={[
{
required: true,
},
]}
>
<TextArea rows={4} />
</Form.Item>
</Col>
</Row>
</Form>
</Modal>
</>
);
}