Datepicker issues.

Datepicker.js

/* eslint-disable no-console, react/prop-types */

import React, { Component, useState } from 'react';
import logo from './logo.svg';
import './App.css';
import {IconSettings, Datepicker, Button} from '@salesforce/design-system-react';

class Example extends React.Component {
  static displayName = 'DatepickerExample';
  constructor(props) {
    super(props);
    this.state = {curDate: new Date()};
  }

	render() {
    console.log("Curdate", this.state.curDate);
		return (
			<React.Fragment>
				<Datepicker
          value = {this.state.curDate}
					onChange={(event, data) => {
						if (this.props.action) {
							const dataAsArray = Object.keys(data).map((key) => data[key]);
							this.props.action('onChange')(event, data, ...dataAsArray);
						} else if (console) {
							console.log('onChange', event, data);
						}
					}}
					onCalendarFocus={(event, data) => {
						if (this.props.action) {
							const dataAsArray = Object.keys(data).map((key) => data[key]);
							this.props.action('onCalendarFocus')(event, data, ...dataAsArray);
						} else if (console) {
							console.log('onCalendarFocus', event, data);
						}
					}}
				/>
        <Button onClick={()=>this.setState({curDate: null})}>Reset</Button>
        <Button onClick={()=>this.setState({curDate: undefined})}>Reset with undefined</Button>
        <Button onClick={()=>this.setState({curDate: ""})}>Reset with empty string</Button>
			</React.Fragment>
		);
	}
}

class App extends Component {
  render() {
    return (
      <div className="App">
      <Example />
      </div>
    );
  }
}

export default App;