DatePicker Issue

Expected behavior

Actual behavior arning: Failed prop type: Invalid prop TextFieldComponent supplied to DateTextField. in DateTextField (created by Context.Consumer) in WithUtils(DateTextField) (created by ModalWrapper) in ModalWrapper (created by BasePicker) in BasePicker (created by Context.Consumer) in WithUtils(BasePicker) (created by DatePickerModal) in DatePickerModal (created by ForwardRef) in ForwardRef (created by DatePicker) in MuiPickersUtilsProvider (created by DatePicker) in MuiThemeProviderOld (created by DatePicker) in div (created by DatePicker) in DatePicker (at PersonalInformation.jsx:297) in div (created by Col) in Col (at PersonalInformation.jsx:295) in div (created by Row) in Row (at PersonalInformation.jsx:294) in form (at PersonalInformation.jsx:191) in div (created by Col) in Col (at PersonalInformation.jsx:189) in div (created by Row) in Row (at PersonalInformation.jsx:188) in PersonalInformation (at LayoutPDS.jsx:47) in div (created by TabPane) in TabPane (at LayoutPDS.jsx:46) in ShowTab (at LayoutPDS.jsx:217) in div (created by TabContent) in TabContent (at LayoutPDS.jsx:213) in div (created by Container) in Container (at LayoutPDS.jsx:208) in LayoutPDS (at AppForms.js:227) Resources (screenshots, code snippets etc.) import React, { useState,useEffect } from 'react'

import { MDBContainer, MDBRow, MDBCol, MDBCard, MDBCardHeader, MDBCardBody, MDBInput, MDBBtn,MDBSelect,MDBDatePicker } from 'mdbreact';

import PaddingTop from './PaddingTop'; import NavBarPage from './NavBarPage'; import Axios from 'axios';

const PersonalInformation=(props)=>{

const [frm, setValues] = useState({
    EmployeeNo: '',
    LastName: '',
    FirstName: '',
    MiddleName: '',
    NameExtenstion: '',
    BirthDate: new Date()


  });



 const getDateValue = dtPickerName =>(actualValue)=>{

    // alert(dateValue + " " + actualValue);
    setValues({ ...frm, [dtPickerName]: actualValue });
    console.log(actualValue);
 } 


useEffect(()=>{

   loadSexOptions();
   loadCivilStatusOptions();
    loadPersonalInfo();


  },[sessionStorage.getItem("EmployeeCode")]);

return (
    <React.Fragment>


        <MDBRow>
            <MDBCol md="10">

                <form
                className="needs-validation"
                onSubmit={submitHandler}
                noValidate
                >
                 <MDBRow>
                    <MDBCol md="10">
                        <br/>
                        <h3><b>Personal Information</b></h3>
                    </MDBCol>

                </MDBRow>

                <MDBRow>
                    <MDBCol md="10">
                    {/* <MDBDatePicker value={frm.BirthDate} getValue={getDateValue("BirthDate")} /> */}
                    <MDBDatePicker clearable valueDefault={null} emptyLabel="Select Date" getValue={getDateValue("BirthDate")} />

                    </MDBCol>
                </MDBRow>




                <MDBBtn color="success" type="submit">
                    Save
                </MDBBtn>
                </form>

            </MDBCol>
        </MDBRow>


    </React.Fragment>
);

} export default PersonalInformation