我使用的是Material UI Toggle按钮组件，它有Monthly和Weekly两个按钮。两者都使用相同的组件，popper仅在选定按钮为weekly时才会显示。
我的问题是，当我在每周类型中打开弹出器时，没有关闭它，在我选择monthly之后，弹出器将显示在页面的其他位置（与weekly类型中显示的位置不同）。
不知道是什么问题。
或者像切换到另一个按钮之前，关闭弹出？
下面是我的代码：

<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