Error using AntD DatePicker in React: 'DatePicker' cannot be used as a JSX component - Types returned by 'render()' are incompatible

Question

I am trying to use an AntD DatePicker in my React code and getting the following error:

'DatePicker' cannot be used as a JSX component.
  Its instance type 'Component<PickerProps<Dayjs> & { status?: "" | "warning" | "error"; hashId?: string; popupClassName?: string; rootClassName?: string; }, unknown, any> & CommonPickerMethods' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("c:/Users/rajai/Documents/trrf/packages/app/ui/node_modules/@types/styled-components/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.

I am using it like so:

export default function FormFieldDate({ label, value, editable, isEditing }: any) {
  return editable && isEditing ? 
  (
    <Form.Item
      label={label}
      css={css`
        &:hover {
          background: whitesmoke;
        }
        .ant-form-item-label {
          min-width: 130px;
        }
        .ant-form-item-control-input {
          padding: 0 0 0 12px;
        }
      `}
    >
    <DatePicker />
    </Form.Item>
  )
  : 
  ...

I have tried the solution mentioned here but it didn't fix it: https://github.com/ant-design/ant-design/issues/34952#issue-1198718564

Answer 1

I ran "preinstall": "npx npm-force-resolutions" but it throw few errors, errors are mainly using hooks wrongly, after fixing I ran yarn add @types/react@latest