popper cant close when switching between toggle button

I am using the Material Ui Toggle button component, which have Monthly and Weekly two buttons. Both using the same component, the popper will show only if the selected button is weekly.

My problem is when I open the popper in the weekly type, without close it, after that I choose monthly, the popper will show somewhere else in the page (not the same position that show in weekly type).

Not sure what's wrong with it.

Or make it like before swtiching to another button, close the popper?

Here's my code:

  <IconButton onClick={(event) => _handleOpenCalendar(event)}>
    <InsertInvitation />
  </IconButton>

  <Popper
    open={openCalendar}
    anchorEl={anchorEl}
    modifiers={{
      flip: {
        enabled: true,
      },
    }}
  >
<Box sx={{ border: 1, p: 2, bgcolor: "background.paper" }}>
  <DateRangePicker
    inputFormat="dd/MM/yyyy"
    startText="Start Date"
    endText="End Date"
    value={selectedDate?.[currentIdx]}
    onChange={(newValue) => _handleChangeDate(newValue)}
    maxDate={new Date()}
    renderInput={(startProps, endProps) => (
      <React.Fragment>
        <TextField {...startProps} helperText="" label="" />
        <DateRangeDelimiter> to </DateRangeDelimiter>
        <TextField {...endProps} helperText="" label="" />
      </React.Fragment>
    )}
  />
  <Box
    style={{
      marginTop: 5,
      display: "flex",
      justifyContent: "flex-end",
    }}
  >
    <Button
      variant="outlined"
      color="primary"
      onClick={_handleChangeDateCancel}
      style={{ marginRight: 5 }}
    >
      Cancel
    </Button>
    <Button
      variant="contained"
      color="primary"
      onClick={_handleChangeDateOK}
    >
      OK
    </Button>
  </Box>
</Box>

const _handleChangeDateOK = () => {
    setOpenCalendar(false);
    setAnchorEl(null);
  };


const _handleChangeDateCancel = () => {
  setOpenCalendar(false);
  setAnchorEl(null);
  };

const _handleOpenCalendar = (event) => {
    setAnchorEl(event.currentTarget);
    setOpenCalendar((previousOpen) => !previousOpen);
  };

Codesandbox url: https://codesandbox.io/s/keen-grass-mg803l?file=/demo.tsx

Solution

change :

const handleChangeType = (event, value) => {
    setType(value);
    
  };

to :

const handleChangeType = (event, value) => {
    setType(value);
    setOpenCalendar(false);
  };

By doing this change whenever you click the ToggleButtons you'll update the open property to false so the Popper will not be shown.