Why does rendering my antd form fail when including a DatePicker?

Question

I have a component that renders a simple form looking like this:

const { saveButtonProps, formProps, formLoading, queryResult } = useForm();
return (
  <Form {...formProps} layout='vertical'>
    <Form.Item hidden name="id" />
     
    <....blah blah blah, other form items.../>

    <Row gutter={[32, 32]}>
      <Col span={8}>
        <Form.Item name="reportDate" label="Report Date" initialValue={dayjs(formProps?.initialValues?.reportDate)}>
          <DatePicker placeholder="Report Date" />
        </Form.Item>
      </Col>
    </Row>
  </Form>
)

However, when I navigate to the page, nothing renders and I get an error that "date4.isValid is not a function". Looking through the stack trace, its getting thrown by PickerInput/hooks/useFieldsInvalidate, which ultimately tracks up to rc-picker/es/generate/dayjs.js.

I think useForm is picking up that I want to render the value of "reportDate" in the JSON that comes back from the server within a component and is immediately treating it as a dayjs type object? If I change the <Form.Item>'s control to something like a standard input, the page renders just fine and contains the data I expect.

And if I put the DatePicker component outside of the form and just set its initial value to dayjs(formProps?.initialValues?.reportDate), it sets the date properly as well. So is there something extra I need to do within the call to useForm to get it to convert the return value to the format its apparently expecting from the start?

Note: this is all done using the Refine framework, so the call to useForm is coming from @refinedev/antd.

Answer 1

Figured it out.

Instead of trying to do the translation in initialValue, I added getValueProps={(value) => ({ value: value ? dayjs(value) : "", })} and that got things working.