Issue With Implementing ReactGrid DropDown Cell

Question

I am using ReactGrid --> https://reactgrid.com/ I am trying to implement DropDownCell in my ReactGrid Cell In my code I am fetching data through API and defining Rows and Columns accordingly. here is my Code

type OptionType = {
  label: string
  value: string
}
interface DropdownCell extends Cell {
  type: "dropdown"
  selectedValue?: string
  values: OptionType[]
  isDisabled?: boolean
  isOpen?: boolean
  inputValue?: string
}
const dropDownValues: OptionType[] = [
  {
    label: "Submitted",
    value: "Submitted",
  },
  {
    label: "Scheduled",
    value: "Scheduled",
  },
  {
    label: "AwaitingDealerSignOff",
    value: "AwaitingDealerSignOff",
  },
  {
    label: "DealerSignOff",
    value: "DealerSignOff",
  },
  {
    label: "Confirmed Pending",
    value: "Confirmed Pending",
  },
  {
    label: "Accepted",
    value: "Accepted",
  },
  {
    label: "Final",
    value: "Final",
  },
]

function ScheduleFeed() {
const headerRow: Row = {
        rowId: "header",
        height: 150,
        cells: [
          { type: "header", text: "Week No" },
          { type: "header", text: "Production Start Date" },
          { type: "header", text: "Chasis No" },
          { type: "header", text: "Cusomter Name" },
          { type: "header", text: "Model" },
          { type: "header", text: "Dealer" },
          { type: "header", text: "Status" },
          { type: "header", text: "Completion Date" },
          { type: "header", text: "Notes" },
          { type: "header", text: "Chassis Notes" },
          { type: "header", text: "Electrical System" },
          { type: "header", text: "Upgrade Pack" },
          { type: "header", text: "Prod Value" },
          { type: "header", text: "Drawn By" },
          { type: "header", text: "Drawn Date" },
        ]
    };
const getRows = (field: ResponseField[], newDates:any): Row[] => [
        headerRow,
        ...field.map<Row>((res, idx) => ({
            rowId: idx,
            cells: [
                { type: "text", text: newDates[idx]?.weekNumber.toString() ?? ""},
                { type: "text", text: newDates[idx]?.date ?? ""},
                { type: "text", text: res.Serial},
                { type: "text", text: res.JobContactLastName},
                { type: "text", text: res.Model},
                { type: "text", text: res.Dealer},
                // { type: "text", text: res.Status,},
                {type: 'dropdown', values: dropDownValues, isOpen: false, isDisabled: false, selectedValue: res.Status, } as DropdownCell,
                { type: "text", text: res.PreferredCompletion },
                { type: "text", text: res.Notes ?? ""},
                { type: "text", text: res.ChassisNotes ?? chesisNotesFieldAutoInput(res.Description) },
                { type: "text", text: res.ElectricalSystem ?? electricalSystemFieldAutoInput(res.Description) },
                { type: "text", text: res.UpgradePack ?? upgradePackFieldAutoInput(res.Description) },
                { type: "text", text: res.ProductionValue ?? ""},
                { type: "text", text: res.DrawnBy ?? ""},
                { type: "text", text: res.DrawnDate ?? ""},
            ] ,
        }))
    ];
const getColumns = (): Column[] => [
        { columnId: "week no", width: 40 },
        { columnId: "productionStartDate", width: 240 },
        { columnId: "chassisNo", width: 80 },
        { columnId: "customer name", width: 140 },
        { columnId: "model", width: 310 },
        { columnId: "dealer", width: 230 },
        { columnId: "status", width: 200 },
        { columnId: "completion date", width: 115 },
        { columnId: "notes", width: 60 },
        { columnId: "cahssisNotes", width: 100 },
        { columnId: "electricalSystem", width: 100 },
        { columnId: "upgradePack", width: 60 },
        { columnId: "productionValue", width: 30 },
        { columnId: "drawnBy", width: 60 },
        { columnId: "drawnDate", width: 110 },
        
    ];
return(
<div>
            <div className="myGrid">
              <div>
                <div className="tab d-flex gap-2 mb-3">
                  <button className={`px-2 py-1 ${tabToggle === 1 ? 'active' : ''}`} onClick={() => updateTabToggle(1)}>Schedule 1</button>
                  <button className={`px-2 py-1 ${tabToggle === 2 ? 'active' : ''}`} onClick={() => updateTabToggle(2)}>Schedule 2</button>
                  <button className={`px-2 py-1 ${tabToggle === 3 ? 'active' : ''}`} onClick={() => updateTabToggle(3)}>Schedule 3</button>
                </div>
              </div>
                {loading ? (
                    <div></div>
                ) : (
                <>
                    {isBigScreen ? (
                    <>
                      <div className="row">
                        <div className="col-12">
                          <div className={`schedule-feed__data-grid ${tabToggle === 1 ? 'd-block' : 'd-none'}`}>
                            {
                              data.length > 0 ? 
                              <div>
                                <ReactGrid stickyTopRows={1}
                                  rows={rows}
                                  columns={columns}
                                  onCellsChanged={handleChanges}
                                />
                              </div>
                              :
                              <p>No Data Found...</p>
                            }
                          </div>
                          <div className={tabToggle === 2 ? 'd-block' : 'd-none'}>
                            <p>Tab 2</p>
                          </div>
                          <div className={tabToggle === 3 ? 'd-block' : 'd-none'}>
                            <p>Tab 3</p>
                          </div>
                        </div>
                      </div>
                    </>
                    
                    ) : (
                        <div></div>
                    )}
                </>
                )}
            </div>
        </div>
)
}

I tried to add dropdown to the status cell. But The dropdown is not getting opened. I assume that I have to somehow toggle the isOpen Prop. But I don't know how.