Реагировать js: материализация css Идентификатор datepicker не может прочитать свойство

Question

Я использую проверку формы React. Для стилизации поля ввода я использую materialize css. Я могу отправить форму успешно. Вместо типа даты поля ввода я использовал материализовать css 'DatePicker. Но проблема заключается в том, что при выборе даты с помощью DatePicker я получил сообщение об ошибке «Ошибка типа: невозможно прочитать свойство id из неопределенного». Кроме того, я хочу отформатировать DatePicker, где пользователи могут выбрать год.

Это компонент моей реакции

import React, { useState } from "react";
import axios from "axios";
import { DatePicker } from "react-materialize";
const Create = () => {
  const [state, setState] = useState({
    name: "",
    birthday: "",
    address: "",
    zipcode: "",
    city: "",
    phone: "",
    email: ""
  });

  const onChangeStudent = e => {
    setState({
      ...state,
      [e.target.id]: e.target.value
    });
  };

  const onSubmit = e => {
    e.preventDefault();
    const obj = {
      name: state.name,
      birthday: state.birthday,
      address: state.address,
      zipcode: state.zipcode,
      city: state.city,
      phone: state.phone,
      email: state.email
    };
    axios
      .post("/students", obj)
      .then(res => console.log(res.data))
      .catch(error => {
        console.log(error);
      });

    setState({
      name: "",
      birthday: "",
      address: "",
      zipcode: "",
      city: "",
      phone: "",
      email: ""
    });
  };

  return (
    <React.Fragment>
      <h3 align="center">Student </h3>
      <form onSubmit={onSubmit}>
        <div className="form-group">
          <label>Student Name: </label>
          <input
            type="text"
            className="form-control"
            value={state.name}
            onChange={onChangeStudent}
            id="name"
            required
          />
        </div>
        <div className="form-group">
          <label>Birthday: </label>
          <DatePicker
            label="Date of birth"
            value={state.birthday}
            onChange={onChangeStudent}
            id="birthday"
            required

          />
        </div>
        <div className="form-group">
          <label>Address: </label>
          <input
            type="text"
            className="form-control"
            value={state.address}
            onChange={onChangeStudent}
            id="address"
            required
          />
        </div>
        <div className="form-group">
          <label>Zipcode: </label>
          <input
            type="number"
            className="form-control"
            value={state.zipcode}
            onChange={onChangeStudent}
            id="zipcode"
            required
          />
        </div>
        <div className="form-group">
          <label>City: </label>
          <input
            type="text"
            className="form-control"
            value={state.city}
            onChange={onChangeStudent}
            id="city"
            required
          />
        </div>
        <div className="form-group">
          <label>Phone: </label>
          <input
            type="tel"
            className="form-control"
            value={state.phone}
            onChange={onChangeStudent}
            id="phone"
            required
          />
        </div>
        <div className="form-group">
          <label>Email: </label>
          <input
            type="email"
            className="form-control"
            value={state.email}
            onChange={onChangeStudent}
            id="email"
            required
          />
        </div>
        <div className="form-group">
          <input
            type="submit"
            value="add student"
            className="btn btn-primary"
          />
        </div>
      </form>
    </React.Fragment>
  );
};

export default Create;