I am using a date column in AgGrid React, and this column displays the dates. What I need is that
Datepicker opens when I change any cell in the date column; the dates that are showing in every cell should be blocked so that it only shows the dates that aren’t in the data I’m passing.

enter image description here As can be seen in the photograph, I am able to pick the date December 1, 2023, but I am passing that date in the dates array and it is also displayed in the date column cell. Therefore, I need to disable December 1, and the dates that are not in the dates array should be selectable.Also set the data to be sent to the api inside the handle. Using the variable overridePrice, the CellValueChanged method

const HisData = (hisData Props: HisData Props) => {

  const dataRef = useRef<AgGridReact<
    ShowMarketDataResponseType[]
  > | null>(null);
  const [updatedData, setUpdatedData] = useState<
    ShowMarketDataResponseType[] | undefined
  >([]);
  const [overRiddenPrice, setOverRiddenPrice] = useState<
    OverridePriceRequestType[]
  >([]);
  const [rowData, setRowData] = useState<ShowMarketDataResponseType[]>();
  const [selectedRowsIndex, setSelectedRowsIndex] = useState<number | null>(
    null
  );

  const dates = gridMarketData?.map((dt: ShowMarketDataResponseType) => {
    return dt.date;
  });
  data for dates = [
    "2023-12-01",
    "2023-12-02",
    "2023-12-03",
    "2023-12-04",
    "2023-12-05",
    "2023-12-06",
    "2023-12-07",
    "2023-12-08",

]

  const handleCellValueChanged = (params: any) => {
    const { data } = params;
    const overridedPrice: OverridePriceRequestType[] = [...overRiddenPrice];
    overridedPrice.push(data);
    setOverRiddenPrice(overridedPrice);
  };

  const gridOptions = {
    columnDefs: [
      {
        field: "date",
        headerName: "Date",
        minWidth: 200,
        type: "numericColumn",
        wrapHeaderText: true,
        editable: (params: any) => {
          if (params.data.date !== "") {
            const exists = gridMarketData?.some(
              (record: ShowMarketDataResponseType) =>
                record.date === params.data.date
            );
            return !exists;
          }
          return params.data.date === "";
        },
      },
      {
        field: "price",
        headerName: "Price",
        minWidth: 210,
        type: "numericColumn",
        wrapHeaderText: true,
      },
    ],
  };
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      sortable: true,
      resizable: true,
      filter: true,
      flex: 1,
      menuTabs: ["generalMenuTab", "filterMenuTab"],
      shownorowsoverlay: true,
      unSortIcon: true,
    };
  }, []);


  const onPriceSave = () => {
    overridePriceSaveCallback(overRiddenPrice);
    setOverRiddenPrice([]);
  };

  const handleOverridePriceCancel = () => {
    setUpdatedData(cloneDeep(gridMarketData));
    setOverRiddenPrice([]);
    setSelectedRowsIndex(null);
  };

  useEffect(() => {
    setUpdatedData(cloneDeep(gridMarketData));
  }, [gridMarketData]);

  return (
    <MuiBox className="tw-h-auto tw-max-h-full">
      <MuiGrid
        container
        item
        className="tw-grid md:tw-grid-cols-2 sm:tw-grid-cols-2 lg:tw-grid-cols-2 tw-grow"
      >
        <MuiGrid
          item
          className="tw-flex tw-m-1 md:tw-grid-cols-2 sm:tw-grid-cols-2 lg:tw-grid-cols-2 md:tw-justify-end lg:tw-justify-end sm:tw-justify-end"
          alignItems="center"
        >
          <MuiButton
            className="tw-bg-slate-75 tw-text-xs"
            onClick={onPriceSave}
            disabled={overRiddenPrice.length === 0}
          >
            Save
          </MuiButton>
          <MuiButton
            className="tw-bg-slate-75 tw-ml-3 tw-text-xs"
            onClick={handleOverridePriceCancel}
          >
            Cancel
          </MuiButton>
        </MuiGrid>
      </MuiGrid>
      <div className="fx-conduit-container tw-w-full tw-h-full tw-flow-root ag-theme-alpine tw-mt-1">
        {updatedData && updatedData.length > 0 ? (
          <AgGridReact
            ref={dataRef }
            rowData={updatedData}
            columnDefs={gridOptions.columnDefs}
            defaultColDef={defaultColDef}
            editType={"fullRow"}
            onCellValueChanged={handleCellValueChanged}
            pagination
            suppressDragLeaveHidesColumns
            stopEditingWhenCellsLoseFocus
            suppressCellFocus
            paginationPageSize={15}
            paginationPageSizeSelector={[5, 15, 20]}
            domLayout="autoHeight"
            rowSelection="single"
            onSelectionChanged={onRowSelectionChanged}
          />
        ) : (
          <div className=" tw-flex tw-items-center tw-justify-center">
            <div className="tw-max-w-sm tw-p-4">
              <div className="tw-text-xs tw-text-center">
                <span>{noDataMessage}</span>
              </div>
            </div>
          </div>
        )}
      </div>
    </MuiBox>
  );
};

export default HistoricalData;

Please refer to the code and let me know if anyone has a solution.