How to draw filter datepicker?

return (
    <Grid container>
      <Grid item xs={24} lg={12}>
        <Card sx={{paddingX: {xs: 2, md: 0}}}>
          <CardHeader title={"검색"}/>
          <CardContent sx={{pt: 0}}>
            <Box
              component="form"
              sx={{display: "flex", flexDirection: "column"}}
              autoComplete="off"
              onSubmit={handleSubmit(search)}
            >
              <TextField
                {...register("q")}
                label={"검색"}
                placeholder={"주문번호, 주문상태, 주문자, 상품명 등"}
                margin="normal"
                fullWidth
                autoFocus
                size="small"
              />

              <Button type="submit" variant="contained">
                검색하기
              </Button>
            </Box>
          </CardContent>
        </Card>
      </Grid>
      <Grid item xs={24} lg={12}>
        <List
          title={"적립금 지급 내역"}

          wrapperProps={{sx: {paddingX: {xs: 2, md: 0}}}}
        >
          <Typography variant="body1" align="right">
            * 주문건에 대한 상세 내용이나, 클레임 처리, 구독신청 내역 확인 등은 기존 카페24 관리자 페이지에서 진행해 주세요.
          </Typography>
          {open && (
            <PointsDetail
              open={open}
              onClose={handleClose}
              pointDetail={pointDetail}
            />
          )}
          <DataGrid
            {...dataGridProps}
            columns={columns}
            filterModel={undefined}
            autoHeight
            pageSizeOptions={[10, 20, 50, 100]}
            rowHeight={80}
            sx={{
              ...dataGridProps.sx,
              "& .MuiDataGrid-row": {
                cursor: "pointer",
              },
            }}
          />
        </List>
      </Grid>
    </Grid>
  );

return (
    <Grid container>
      <Grid item xs={24} lg={12}>
        <Card sx={{paddingX: {xs: 2, md: 0}}}>
          <CardHeader title={"검색"}/>
          <CardContent sx={{pt: 0}}>
            <Box
              component="form"
              sx={{display: "flex", flexDirection: "column"}}
              autoComplete="off"
              onSubmit={handleSubmit(search)}
            >
              <TextField
                {...register("q")}
                label={"검색"}
                placeholder={"주문번호, 주문상태, 주문자, 상품명 등"}
                margin="normal"
                fullWidth
                autoFocus
                size="small"
              />

              <Button type="submit" variant="contained">
                검색하기
              </Button>
            </Box>
          </CardContent>
        </Card>
      </Grid>
      <Grid item xs={24} lg={12}>
        <List
          title={"적립금 지급 내역"}

          wrapperProps={{sx: {paddingX: {xs: 2, md: 0}}}}
        >
          <Typography variant="body1" align="right">
            * 주문건에 대한 상세 내용이나, 클레임 처리, 구독신청 내역 확인 등은 기존 카페24 관리자 페이지에서 진행해 주세요.
          </Typography>
          {open && (
            <PointsDetail
              open={open}
              onClose={handleClose}
              pointDetail={pointDetail}
            />
          )}
          <DataGrid
            {...dataGridProps}
            columns={columns}
            filterModel={undefined}
            autoHeight
            pageSizeOptions={[10, 20, 50, 100]}
            rowHeight={80}
            sx={{
              ...dataGridProps.sx,
              "& .MuiDataGrid-row": {
                cursor: "pointer",
              },
            }}
          />
        </List>
      </Grid>
    </Grid>
  );