why date wrapper goes top left of screen

The DateWrapper popover is appearing at the top-left side of the button. I've tried fixing it, but it's still not working. how to fix it?

<Box
      sx={{
        display: "flex",
        justifyContent: "flex-start",
        alignItems: "center",
        gap: 1,
      }}
    >
      
      <TimelineDropdown
        displayAll={true}
        dateRange={dateRange}
        setDateRange={setDateRange}
        selectedTimeline={selectedTimeline}
        setSelectedTimeline={setSelectedTimeline}
        height={"42px"}
        handleCustomRange={handleClick}
        loader={dateLoader}
      />


      <FormControl
        variant="outlined"
        size="small"
        sx={{
          height: "42px",
          minWidth: "150px",
        }}
        disabled={dateLoader}
      >
        <InputLabel
          shrink
          sx={{
            "&.MuiInputLabel-shrink.MuiInputLabel-outlined": {
              transform: "translate(14px, -10px) scale(1)",
            },
          }}
        >
          Analytics Type
        </InputLabel>
        <Select
          value={analyticsType}
          defaultValue="email"
          onChange={(e) => {
            setAnalyticsType(e.target.value);
          }}
          className="glass-dropdown"
          label="Analytics Type"
          disabled={dateLoader}
        >
          <MenuItem value="email">Email</MenuItem>
          <MenuItem value="multiChannel">Multi Channel</MenuItem>
          {/* <MenuItem value="web">Web</MenuItem> */}
          {isOutboundCallEnabled && <MenuItem value="voiceCall">Voice Call</MenuItem>}
        </Select>
      </FormControl>
      <Popover
        id={id}
        open={popOpen}
        onClose={handlePopOverClose}
        anchorEl={anchorEl}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
      >
        <DateWrapper
          setAnchorEl={setAnchorEl}
          dateRange={dateRange}
          setDateRange={setDateRange}
          onDateRangeChange={onDateRangeChange}
        />
      </Popover>
      {dateLoader && (
        <Box
          sx={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            height: "50px",
          }}
        >
          <CircularProgress
            sx ={{ width: "20px", height: "20px", padding: "10px" }}
          />
        </Box>
      )}
    </Box>