I'm currently using the Material UI date range picker, but I've encountered an issue. After selecting the dates, the date picker does not close automatically. How can I make it close once the dates are selected? I couldn't find any specific props that address this issue. Is this a bug or expected behavior? The date picker closes automatically in the material demo, so I'm puzzled as to why it's not working in my implementation.

**import React, { useEffect, useState } from 'react';
import { TextField } from '@material-ui/core';
import propTypes from 'prop-types';
import styled from 'styled-components';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import DateRangePicker from '@mui/lab/DateRangePicker';
import Box from '@mui/material/Box';
import { StyledButton } from '../../../../Components/Generics.styled';

const WhenShouldAdRunContainer = styled.div`
    display: flex;
    height: 400px;
    align-items: center;
    flex-direction: column;
`;

const Title = styled.div`
    margin-top: 100px;

    font-size: 23px;
    font-weight: bold;
    letter-spacing: 0px;
    color: #000000;
    opacity: 1;
    height: 50px;
    flex-direction: column;
    font-weight: bold;
    text-align: center;
`;

const StyledNavButtons = styled.div`
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 160px;
    margin-left: auto;
    margin-right: auto;
`;

const DatePickerContainer = styled.div`
    height: 70px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;

    .MuiOutlinedInput-root {
        background-color: #fafbf7;
    }
`;

const WhenShouldAdRun = (props) => {
    const {
        campaignData,
        setCampaignData,
        handleNavButtonBack,
        handleNavButtonNext,
        setPageIndex,
    } = props;
    const [date, setDate] = useState([null, null]);

    const dateIsEmpty = date[0] === null || date[1] === null;

    const handleDateChange = (newValue) => {
        setDate(newValue);
    };

    useEffect(() => {
        if (date[0] && date[1]) {
            setCampaignData({
                ...campaignData,
                startDate: date[0].toISOString(),
                endDate: date[1].toISOString(),
            });
        }
    }, [date]);

    const aWeekFromToday = new Date(Date.now() + 3600 * 1000 * 168);

    const isMobileAd = campaignData.campaignTypeName === 'mobile';
    const isGoogleAd = campaignData.campaignTypeName === 'google';

    const handleNavButtonNextSkipUpload = () => {
        setPageIndex(6);
    };

    const determineRoute = () => {
        if (isMobileAd || isGoogleAd) {
            return handleNavButtonNextSkipUpload();
        }

        return handleNavButtonNext();
    };

    return (
        <WhenShouldAdRunContainer>
            <Title>When should your Ad run?</Title>
            <DatePickerContainer>
                <LocalizationProvider dateAdapter={AdapterDateFns}>
                    <DateRangePicker
                        startText="Start Date"
                        endText="End Date"
                        disableCloseOnSelect={false}
                        value={date}
                        minDate={aWeekFromToday}
                        onChange={(newValue) => {
                            handleDateChange(newValue);
                        }}
                        renderInput={(startProps, endProps) => (
                            <>
                                <TextField variant="outlined" {...startProps} />
                                <Box sx={{ mx: 2 }}> to </Box>
                                <TextField variant="outlined" {...endProps} />
                            </>
                        )}
                    />
                </LocalizationProvider>
            </DatePickerContainer>

            <StyledNavButtons>
                <StyledButton
                    variant="contained"
                    color="primary"
                    onClick={() => handleNavButtonBack()}
                >
                    Back
                </StyledButton>
                <StyledButton
                    variant="contained"
                    color="primary"
                    onClick={() => determineRoute()}
                    disabled={dateIsEmpty}
                >
                    Next
                </StyledButton>
            </StyledNavButtons>
        </WhenShouldAdRunContainer>
    );
};

WhenShouldAdRun.propTypes = {
    campaignData: propTypes.shape({
        startDate: propTypes.string,
        endDate: propTypes.string,
        campaignTypeName: propTypes.string,
    }),
    setCampaignData: propTypes.func,
    handleNavButtonNext: propTypes.func,
    handleNavButtonBack: propTypes.func,
    setPageIndex: propTypes.func,
};

WhenShouldAdRun.defaultProps = {
    campaignData: {},
    setCampaignData: () => {},
    handleNavButtonNext: () => {},
    handleNavButtonBack: () => {},
    setPageIndex: () => {},
};
export default WhenShouldAdRun;