title: ag-Grid React forgets gridApi after it has been set
body: <p>I have modified the <a href="https://www.ag-grid.com/javascript-grid-selection/#example-selection-with-keyboard-arrow-keys" rel="nofollow noreferrer">Selection with Keys</a> example to work with React. However as soon as I press an arrow key, the app crashes in the code below:</p>
  <pre class="lang-js prettyprint-override"><code>const [gridApi, setGridApi] = useState&lt;GridApi | undefined&gt;();
  
  const handleGridReady = (event: GridReadyEvent) =&gt; {
    setGridApi(event.api);
    setGridColumnApi(event.columnApi);
  };
  
  const keyboardNavigation = (params: NavigateToNextCellParams): CellPosition =&gt; {
      if (gridApi === undefined) {
          throw new Error('This should never happen!');
      }
      ...
  };
  </code></pre>
  <p>I am setting <code>gridApi</code> using <code>onGridReady</code> before any keys are pressed (confirmed by adding a <code>console.log</code>). So I don't know how it is getting <code>undefined</code>.</p>
  <p>My full source code is <a href="https://github.com/nareshbhatia/trade-force/blob/master/trade-force-client/src/components/Orders/Orders.tsx#L80-L178" rel="nofollow noreferrer">here</a>.</p>