Dropdown Cell rendering - updating DataGridOverlayEditor

[verfrn-ilab]

Hi devs, great lib!
I'm trying to render dropdown cell with promise/fetch, decoupling it from first rendering (es. using onCellActivated at the select opening), but I can't find the right way to trigger DataGridOverlayEditor to refresh & show values once loaded. I have to click off (triggering onCellEdited) and reopen to see results. Is there a pattern to follow? Thanks in advance

Here is a snippet:

import * as React from "react";
import {
  DataEditor,
  GridCellKind,
} from "@glideapps/glide-data-grid";
import { DropdownCell} from "@glideapps/glide-data-grid-cells";
import "@glideapps/glide-data-grid/dist/index.css";

function App() {

  const columns = [{
      title: "Value",
      id: "value",
    }];

  const ref = React.useRef(null);
  const [data, setData] = React.useState([{}]);
  const [options, setOptions] = React.useState([]);

  const getCellContent =  cell => {
    const [col, row] = cell;
    const dataRow = data[row];
    const indexes = columns.map((col) => col.id);
    const columName = indexes[col];
    const value = dataRow[columName];

    if (options.length===0)
      setTimeout(()=> {
        setData([{value:'how to update dropdown list without clicking away from cell?'}]);
        setOptions(['a','b','c']);
        //ref.current?.updateCells([{cell}]); // not needed, setData invalidate the getCellContent
      },5000);
    
    return {
      kind: GridCellKind.Custom,
      allowOverlay: true,
      readOnly: false,
      data: {
        kind: "dropdown-cell",
        allowedValues: [...new Set([...options, value])],
        value,
      },
    };
  }

  return (
    <div>
          <DataEditor
            getCellContent={getCellContent}
            columns={columns}
            rows={data.length}
            customRenderers={[DropdownCell]}
            ref={ref}
          />
      <div id="portal"/>
      </div>
  )}
export default App;