AtlasKit: How to use DateTimePicker in a Form field?

I want to use form fields (Field) in a form with AtlasKit. I followed the examples and is works fine with text fields. But the DateTimePicker would only appear but not put its state into the form state.

const field = ({ label, help }: Props): JSX.Element => {
    const helperMessage = help ? <HelperMessage>{help}</HelperMessage> : null;
    return (
        <Field
            id="meeting_start_time"
            name="startTime"
            label={label}
            transform={(event, current) => {
                return 'test';
            }}
        >
            {({ fieldProps }) => (
                <>
                    <DateTimePicker
                        {...fieldProps}
                        id="meeting_start_time_picker"
                        onChange={(val) => console.log({ val })}
                    />
                    {helperMessage}
                </>
            )}
        </Field>
    );
};

I experimented with the transform prop, but it is not called.
The onChange works fine. When I read the values from the state on submit with

const data = new FormData(e.target as HTMLFormElement);

I get the field (startTime) but value is always an empty string.

How can I do this?

Hi,

have you tried moving {...fieldProps} down as the last attribute of the Datepicker?

In your example the spread operator comes first, then your id and onChange.
You might be overwriting something that prevents the Field from functioning correctly (probably the onChange).

In the example here, it is working fine: Date Time Picker Example - CodeSandbox

You can view the Final Form Docs – `<Field/>` for more guidance on building forms with AtlasKit Form, as the AtlasKit Form is using react final form.