گرفتن دیتا از calendar

سلام دوستان
وقتتون بخیر
من روی کامپوننت calendar ، یک onchange تعریف کردم ولی وقتی یک روز رو از داخل calendar انتخاب میکنم هیچ دیتایی به من نمیده. در واقع من خواستم وقتی روزی انتخاب شد setstate انجام بشه و داخل date بریزه. کدم هم به این شکله:

import React, { Component } from "react";
import ListItem from "./ListItem";
import Calendar from "react-persian-calendar";
import moment from 'moment-jalaali';

export default class todoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "",
      todoList: [],
      showList: false,
      deadLine: "",
      showCalendar: false,
      date:''
    };
    this.handleClickCheckBox = this.handleClickCheckBox.bind(this);
  }
  handleDeadLine = e => {};
  handleSubmit = e => {
    e.preventDefault();
    let text = this.state.text;
    this.state.todoList.push({
      id: new Date(),
      text,
      checked: false
      // deadLine:
    });

    this.setState({ ...todoList, showList: true });
  };
  handleChange = e => {
    this.setState({ text: e.target.value });
  };
  handleClickCheckBox(id) {
    this.state.todoList.filter(item => {
      if (item.id === id) {
        item.checked = !item.checked;
      }
    });
    this.setState({ todoList: this.state.todoList });
  }
  handleDelete = id => {
    let todolist = this.state.todoList.filter(item => {
      if (item.id !== id) return true;
      else return false;
    });
    this.setState({ todoList: todolist });
  };
  setWrapperRef = node => {
    this.wrapperRef = node;
  };
  componentDidMount() {
    document
      .querySelector("body")
      .addEventListener("click", this.handleDeadLine, false);
  }
  componentWillUnmount() {
    document
      .querySelector("body")
      .removeEventListener("click", this.handleDeadLine, false);
  }
  handleDeadLine = event => {
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      this.setState({
        showCalendar: false
      });
    }
      else{
        this.setState({
          showCalendar:true
        })
      }
    }
    handlerCalendar = value=>{
      this.setState({date:value});

    }
    handleChangeInputDate = e=>{
      if(this.state.date !== null){
        let date =this.state.date;
        date=date.moment().format('jYYYY/jM/jD');
        this.setState({date})
      }
      else{
        this.setState({date:''})
      }
    }

  render() {
    let TotalDone = this.state.todoList.filter(item => {
      if (item.checked === true) return true;
    });
    let Uncomplete = this.state.todoList.filter(item => {
      if (item.checked === false) return true;
    });
    return (
      <div>
        <form onSubmit={this.handleSubmit} className="formStyle">
          <div>
            <table>
              <tbody>
              <tr>
                <td>عنوان تسک:</td>
                <td>
                  <input onChange={this.handleChange} value={this.state.text} />
                </td>
              </tr>
              <tr>
                <td>زمان انجام تسک:</td>
                <td>
                  <input ref={this.setWrapperRef} defaultValue={this.state.date} />
                    {this.state.showCalendar && <Calendar value={this.state.date} onChange={this.handlerCalendar}></Calendar>}
                </td>
              </tr>
              <tr>
                <td></td>
                <td>
                  <button type="submit" className="btnAddStyle">
                    Add Item
                  </button>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <div>
            {this.state.showList && (
              <ul className="ulStyle">
                {this.state.todoList
                  .filter(item => {
                    if (item.checked === false) {
                      return true;
                    }
                  })
                  .map(item => {
                    return (
                      <ListItem
                        key={item.id}
                        text={item.text}
                        id={item.id}
                        onClickCheckbox={this.handleClickCheckBox}
                        onDelete={this.handleDelete}
                        checked={item.checked}
                      />
                    );
                  })}
              </ul>
            )}
          </div>
          <div className="showTotalTask">
            <span>Total Done:</span>
            <span>{TotalDone.length}</span>
          </div>
          <div className="Complete-UncompleteTask">
            <div>
              <span>CompleteTask:</span>
              <span>{TotalDone.length}</span>
            </div>
            <div>
              <span>UnCompleteTask:</span>
              <span>{Uncomplete.length}</span>
            </div>
          </div>
        </form>
        {
          <ul className="ulStyle" style={{ marginTop: "20px", padding: "0px" }}>
            <h1
              style={{
                fontSize: "16px",
                backgroundColor: "#F6D7B9",
                padding: "5px"
              }}
            >
              Complete Tasks
            </h1>
            {this.state.todoList
              .filter(item => {
                if (item.checked === true) {
                  return true;
                }
              })
              .map(item => {
                return (
                  <div>
                    <ListItem
                      key={item.id}
                      text={item.text}
                      id={item.id}
                      onClickCheckbox={this.handleClickCheckBox}
                      onDelete={this.handleDelete}
                      checked={item.checked}
                    />
                  </div>
                );
              })}
          </ul>
        }
      </div>
    );
  }
}