keep react-dates calendar always open

Question

So this is my dateRangePicker code : I actually see this code like a solution somewhere else ..but not working for me.

So this react-date component will be add to a dropdown as a label. and when you click on the label, it will automaticaly open the calendar (without clicking first on "startDate" or "enddate")

  const [focusedInput, setFocusedInput] = useState(true);

  return (
    <div className="App">
      <div
        className={`customDatePicker__wrapper ${className} ${
          monthOpen || yearOpen ? "hideDays" : ""
        } ${props.hideArrowNav ? "hideArrows" : ""}`}
      >
        <DateRangePicker
          isOutsideRange={() => false}
          startDate={startDate}
         startDateId="tado-start-date"
          endDate={endDate}
          endDateId="tado-end-date"
          className={`customDatePicker`}
          onDatesChange={handleDatesChange}
          renderMonthElement={renderMonthElement}
          focusedInput={focusedInput}
          onFocusChange={focusedInput => setFocusedInput(focusedInput)}
          onFocusChange={focusedInput => {
            if (focusedInput) {
              setFocusedInput(focusedInput);
            }

            else {
            //setFocusedInput (moment().format());
            setFocusedInput(focusedInput)

                }
          }}
           closeDatePicker= 'Close'
          showInputs={false}
          hideKeyboardShortcutsPanel
          
        />
      </div>
    </div>
  );
};

Answer 1

You can do this by using onClick={(e) => setFocusedInput('startDate')}.
Then the datepicker will open with state date .