DateTimePicker controlled value

Expected behavior

I can set the value property of the MDBDateTimePicker to keep it in sync with the app state

Actual behavior

Setting the value property of MDBDateTimePicker does not initialize the picker to the app state value (for example: opening an edit modal on an item)

Resources (screenshots, code snippets etc.)

I also tried generating the MDBDateTimePicker and putting the defaultDate and defaultTime in as the app state value, however this did not work and only runs once. The below code sample does not work either. If the modal opens and it's a new item, I want the input blank, if the modal opens and we're editing an item, it should show the value from the app state.

const getDefaultTime = (value)=>{
    if(StringIsNullOrWhiteSpace(value)) return "";
    if(!value.includes(",")) return "";
    let split = value.split(",");
    if(split.length > 1)
    {
        return split[1];
    }
    return "";
}

const getDefaultDate = (value)=>{
    if(StringIsNullOrWhiteSpace(value)) return "";
    if(!value.includes(",")) return "";
    let split = value.split(",");
    if(split.length > 1)
    {
        return split[0];
    }
    return "";
}


const generateDateTimePickerForValue = (value,label,onChangeFn)=>{
        return <MDBDateTimepicker inline inputToggle label={label}
        defaultDate={getDefaultDate(value)}
        defaultTime={getDefaultTime(value)}
        onChange={(e)=>{onChangeFn(e)}}  required/>
    }

From the return() of the component where selectedDateTime is a state variable as a string:

{generateDateTimePickerForValue(selectedDateTime,"Selected DateTime",onSelectedDateTimeChanged)}