Error when adding DateTimePicker from PnP SPFx React controls

Question

I'm having problem when adding DateTimePicker from the @pnp/spfx-controls-react collection. Once added in the render() method, I'm seeing <DateTimePicker name underlined and following error:

'DateTimePicker' cannot be used as a JSX component.
  Its instance type 'DateTimePicker' is not a valid JSX element.
    Types of property 'refs' are incompatible.
      Type '{ [key: string]: import("c:/Users/[...]/source/repos/BnpViews/node_modules/@pnp/spfx-controls-react/node_modules/@types/react/index").ReactInstance; }' is not assignable to type '{ [key: string]: React.ReactInstance; }'.
        Index signatures are incompatible.
          Type 'import("c:/Users/[...]/source/repos/BnpViews/node_modules/@pnp/spfx-controls-react/node_modules/@types/react/index").ReactInstance' is not assignable to type 'React.ReactInstance'.
            Type 'Component<any, {}, any>' is not assignable to type 'ReactInstance'.
              Type 'Component<any, {}, any>' is not assignable to type 'Component<any, {}>'.
                The types returned by 'render()' are incompatible between these types.
                  Type 'ReactNode' is not assignable to type 'false | Element'.
                    Type 'string' is not assignable to type 'false | Element'.ts(2786)

My component code:

import * as React from 'react';
import { IBnpViewsPanelProps } from './IBnpViewsPanelProps';

import styles from './BnpViewsPanel.module.scss';
import { DateTimePicker, DateConvention } from '@pnp/spfx-controls-react/lib/dateTimePicker';

export interface IBnpViewsPanelState {
  date: Date|null;
}

export default class BnpViewsPanel extends React.Component<IBnpViewsPanelProps, IBnpViewsPanelState> {
  constructor(props: IBnpViewsPanelProps){
    super(props);

    this.setState({date: null});
  }

  public render(): React.ReactElement<IBnpViewsPanelProps> {
    return(
      <DateTimePicker label="test" dateConvention={DateConvention.Date} value={this.state.date}/>
    );
  }



}

My packages:

  "dependencies": {
    "@microsoft/sp-core-library": "~1.4.0",
    "@microsoft/sp-lodash-subset": "~1.4.0",
    "@microsoft/sp-office-ui-fabric-core": "~1.4.0",
    "@microsoft/sp-webpart-base": "~1.4.0",
    "@pnp/sp": "^2.0.12",
    "@pnp/spfx-controls-react": "2.2.0",
    "date-fns": "^2.16.1",
    "react": "15.6.2",
    "react-dom": "15.6.2"
  },
  "

Any ideas?

Answer 1

Just as @m1g suggested in the comment, the problem was with SPFx version vs spfx-controls-react version. Once I've downgraded the controls to 1.x everything started to run smoothly.