Reactでag-gridが描画されません。

前提

ag-grid-reactを利用したいです。
ソースコード内の「OlympicData」は、ag-grid のサンプルコード、APIを使用しています。

実現したいこと

ag-gridを描画したいです。。

発生している問題・エラーメッセージ

埋込の文字列「Grid」は表示されるものの、ag-gridが描画されません。コンソールログで警告等は表示されていません。
devtoolsで確認したところ、コンポーネントとしては認識されているようです。

該当のソースコード

src/App.tsx

tsx
1import { useCallback, useMemo, useState } from 'react';
2import { AgGridReact } from 'ag-grid-react';
3import { ColDef, GridReadyEvent } from 'ag-grid-community';
4
5import 'ag-grid-community/styles/ag-grid.css';
6import 'ag-grid-community/styles/ag-theme-alpine.css';
7
8export interface IOlympicData {
9    athlete: string;
10    age: number;
11    country: string;
12    year: number;
13    date: string;
14    sport: string;
15    gold: number;
16    silver: number;
17    bronze: number;
18    total: number;
19}
20
21export const App = () => {
22
23  const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
24  const gridStyle = useMemo(() => ({ height: '100%', width: '100%' }), []);
25  const [rowData, setRowData] = useState<IOlympicData[]>();
26  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
27      { field: 'athlete', minWidth: 150 },
28      { field: 'age', minWidth: 50, filter: 'agNumberColumnFilter' },
29      { field: 'country', width: 120 },
30      { field: 'year', width: 90 },
31      { field: 'date', width: 110 },
32      { field: 'sport', width: 110 },
33      { field: 'gold', width: 110 },
34      { field: 'silver', width: 110 },
35      { field: 'bronze', width: 110 },
36  ]);
37  const defaultColDef = useMemo<ColDef>(() => {
38      return {
39          editable: true,
40          sortable: true,
41          flex: 1,
42          minWidth: 100,
43          filter: true,
44          resizable: true,
45      };
46  }, []);
47
48  const onGridReady = useCallback((params: GridReadyEvent) => {
49      console.log('onGridReady called.')
50      fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
51          .then((resp) => resp.json())
52          .then((data: IOlympicData[]) => setRowData(data.slice(0, 600)));
53  }, []);
54  return (
55      <>
56      Grid <!-- ←この文字列は表示される-->
57      <div style={containerStyle}>
58          <div style={gridStyle} className="ag-theme-alpine">
59              <AgGridReact<IOlympicData>
60                  rowData={rowData}
61                  columnDefs={columnDefs}
62                  defaultColDef={defaultColDef}
63                  ensureDomOrder={true}
64                  suppressColumnVirtualisation={true}
65                  suppressRowVirtualisation={true}
66                  onGridReady={onGridReady}
67              ></AgGridReact>
68          </div>
69      </div>
70      </>
71  );
72  };
73
74export default App;

src/index.tsx

tsx
1import { StrictMode } from 'react';
2import { createRoot } from 'react-dom/client'
3import App from './App';
4
5import './index.css';
6
7const container = document.getElementById('app');
8const root = createRoot(container!);
9root.render(
10  <StrictMode>
11    <App />
12  </StrictMode>,
13);