I am having issues about date value. The problem is when I click on Flexible Search On button it will appear today's date but the value is empty and I can't search anything I have to click into and change it to any date to able to click search button.

Here is my code base:

  getStartDate() {
    let date = this.props.form["startDate"];
    if (date === "") {
      date = moment().format("MM/DD/YYYY")
    }
    return date
  }

 render() {
    const { localize } = this.context;
    let dateSearch;
    let datePickerValue: any = this.getStartDate();

if (this.props.form["flexibleSearch"]) {
  dateSearch = (
    <MvSelect
      name="startDate"
      onChange={this.handleInput}
      label={localize('static.content.search-month')}
      required={true}
      value={this.props.form["startDate"]}
      items={this.props.criteria.searchMonths}
      tabIndex={2}
    />
  );
} else {

  dateSearch = (
    <MvDatePicker
      id="exact-date"
      name="startDate"
      required={true}
      tabIndex={2}
      softError={"Date not in range"}
      items={this.props.criteria.searchMonths}
      placeholder={localize('static.content.search-by-date')}
      onChange={this.handleInput}
      value={datePickerValue}
    />

And I figured out that when I added this line of code this.props.form["startDate"] = date into function getStartDate() it will able to search because I have the default value but if I do that I will lost the default value when I search for month which is "Search By Month" is default value but now it's showing "Oct 2021" as a default value