Q. Can't 'open' and 'closeOnClickOutside' properties be used together?

I want to express the period.
When startDate is selected, to open the endDate.
So, I used open.
Then the closeOnClickOutside property was not working.
Is there a solution that allows me to do something like this?

My code
```
import React, { useState } from "react";

import {InputGroup, InputGroupAddon, InputGroupText } from "reactstrap";
import ReactDatetimeClass from "react-datetime";
import "react-circular-progressbar/dist/styles.css";
import { useEffect } from "react";
import moment, { Moment } from "moment";
import axios from "axios";

const DateData = () => {
const [ data, setData ] = useState([]);
const [ startDate, onChangeStartDate] = useState(undefined);
const [ endDate, onChangeEndDate] = useState(undefined);

const [openStartDate, onOpenStartDate] = useState(false);
const [openEndDate, onOpenEndDate] = useState(false);

const analysisRequest = () => {
if(startDate && endDate && moment.isMoment(startDate) && moment.isMoment(endDate)) {
// startDate와 endDate가 있다면 기간 api
const response = axios.get(`/datedata?start=${startDate.format('YYYYMMDD')}&enddate=${endDate.format('YYYYMMDD')}`)
setData(response)
}
}

useEffect(() => {
if(startDate && (moment.isMoment(startDate) && endDate && (moment.isMoment(endDate))) {
analysisRequest();
}
}, [startDate, endDate]);

return (






{
return onOpenStartDate(false)}/>
}}
renderDay={(props, currentDate, selectedDate) => {
let classes = props.className;
if (
startDate &&
endDate &&
(startDate as any)._d + "" === currentDate._d + ""
) {
classes += " start-date";
} else if (
startDate &&
endDate &&
new Date((startDate as any)._d + "") <
new Date(currentDate._d + "") &&
new Date((endDate as any)._d + "") >
new Date(currentDate._d + "")
) {
classes += " middle-date";
} else if (
endDate &&
(endDate as any)._d + "" === currentDate._d + ""
) {
classes += " end-date";
}
return (

{currentDate.date()}

);
}}
isValidDate ={(current)=> {
return current.isSameOrBefore(moment.now())
}}
open={openStartDate}
onOpen={(e)=> {
onOpenEndDate(false)
onOpenStartDate(true)
}}
onClose={(e)=>{
onOpenStartDate(false)
}}
onChange={e => {
if(e === '') {
onChangeStartDate(undefined)
onOpenStartDate(false)
} else if(typeof(e) == 'string') {
onChangeStartDate(undefined)
onOpenStartDate(true)
} else {
onChangeStartDate(e)
onOpenStartDate(false)
onOpenEndDate(true)
}
}}
closeOnClickOutside ={true}
/>
{
console.log(props)
return {
if(endDate == "" || endDate == undefined) {
onOpenEndDate(undefined)}
}
}/>
}}
renderDay={(props, currentDate, selectedDate) => {
let classes = props.className;
if (
startDate &&
endDate &&
(startDate as any)._d + "" === currentDate._d + ""
) {
classes += " start-date";
} else if (
startDate &&
endDate &&
new Date((startDate as any)._d + "") <
new Date(currentDate._d + "") &&
new Date((endDate as any)._d + "") >
new Date(currentDate._d + "")
) {
classes += " middle-date";
} else if (
endDate &&
(endDate as any)._d + "" === currentDate._d + ""
) {
classes += " end-date";
}
return (

{currentDate.date()}

);
}}
isValidDate ={(current)=> {
return startDate== undefined || (current.isSameOrBefore(moment.now()) && current.isSameOrAfter(startDate))
}}
open={openEndDate}
onOpen={(e)=> {
onOpenStartDate(false)
onOpenEndDate(true)
}}
onClose={(e)=>{
onOpenEndDate(false)
}}
onChange={e => {
if (e ==='') {
onChangeEndDate(undefined)
onOpenEndDate(false)
} else if(typeof(e) == 'string') {
onChangeEndDate(e)
onOpenEndDate(true)
} else {
onChangeEndDate(e)
onOpenEndDate(false)
}
}}
closeOnSelect={true}
closeOnClickOutside ={true}
/>

);
};

```