Reactのag-grid利用でInvalid aria prop `aria-description` on <div> tag.が発生してしまいます。

前提

Reactでag-gridを利用したい

実現したいこと

Reactでag-gridを利用したと際のエラーを解消したい

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

Headerや埋込の文字列は表示されるものの、ag-gridが描画されません。

arning: Invalid aria prop `aria-description` on <div> tag. For details, see https://reactjs.org/link/invalid-aria-props
    at div
    at HeaderCellComp (http://localhost:3000/static/js/vendors-node_modules_ag-grid-react_main_js-node_modules_ag-grid-community_styles_ag-grid_css--64ce27.chunk.js:57655:25)
    at div
    at HeaderRowComp (http://localhost:3000/static/js/vendors-node_modules_ag-grid-react_main_js-node_modules_ag-grid-community_styles_ag-grid_css--64ce27.chunk.js:58100:36)
    at div
    at div
    at HeaderRowContainerComp (http://localhost:3000/static/js/vendors-node_modules_ag-grid-react_main_js-node_modules_ag-grid-community_styles_ag-grid_css--64ce27.chunk.js:58249:20)
    at div
    at GridHeaderComp (http://localhost:3000/static/js/vendors-node_modules_ag-grid-react_main_js-node_modules_ag-grid-community_styles_ag-grid_css--64ce27.chunk.js:57566:20)
    at div
    at GridBodyComp (http://localhost:3000/static/js/vendors-node_modules_ag-grid-react_main_js-node_modules_ag-grid-community_styles_ag-grid_css--64ce27.chunk.js:57115:20)
    at TabGuardCompRef (http://localhost:3000/static/js/vendors-node_modules_ag-grid-react_main_js-node_modules_ag-grid-community_styles_ag-grid_css--64ce27.chunk.js:58914:24)
    at div
    at div
    at GridComp (http://localhost:3000/static/js/vendors-node_modules_ag-grid-react_main_js-node_modules_ag-grid-community_styles_ag-grid_css--64ce27.chunk.js:57349:20)
...

該当のソースコード

App.tsx

Typescript
1import { AppProvider } from '@/providers/app';
2import { AppRoutes } from '@/routes';
3
4function App() {
5  return (
6    <AppProvider>
7      <AppRoutes />
8    </AppProvider>
9  );
10}
11
12export default App;

routes/index.tsx

Typescript
1import { Route, Routes } from 'react-router-dom';
2
3import { OlympicData} from './OlympicData';
4
5export const OlympicDataRoutes = () => {
6  return (
7    <Routes>
8      <Route path="olympicData" element={<OlympicData/>} />
9    </Routes>
10  );
11};
12

routes/OlympicData.tsx

Typescript
1import { useNavigate } from 'react-router-dom';
2import { Layout } from '../components/Layout';
3import { OlympicDataForm} from '../components/OlympicDataForm';
4
5export const OlympicData= () => {
6  const navigate = useNavigate();
7
8  return (
9    <Layout title="OlympicData">
10      <OlympicDataForm />
11    </Layout>
12  );
13};

OlympicDataForm.tsx

Typescript
1export interface IOlympicData {
2    athlete: string;
3    age: number;
4    country: string;
5    year: number;
6    date: string;
7    sport: string;
8    gold: number;
9    silver: number;
10    bronze: number;
11    total: number;
12}
13export const OlympicDataForm = () => {
14
15    const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []);
16    const gridStyle = useMemo(() => ({ height: '100%', width: '100%' }), []);
17    const [rowData, setRowData] = useState<IOlympicData[]>();
18    const [columnDefs, setColumnDefs] = useState<ColDef[]>([
19        { field: 'athlete', minWidth: 150 },
20        { field: 'age', minWidth: 50, filter: 'agNumberColumnFilter' },
21        { field: 'country', width: 120 },
22        { field: 'year', width: 90 },
23        { field: 'date', width: 110 },
24        { field: 'sport', width: 110 },
25        { field: 'gold', width: 110 },
26        { field: 'silver', width: 110 },
27        { field: 'bronze', width: 110 },
28    ]);
29    const defaultColDef = useMemo<ColDef>(() => {
30        return {
31            editable: true,
32            sortable: true,
33            flex: 1,
34            minWidth: 100,
35            filter: true,
36            resizable: true,
37        };
38    }, []);
39
40    const onGridReady = useCallback((params: GridReadyEvent) => {
41        fetch('https://www.ag-grid.com/example-assets/olympic-winners.json')
42            .then((resp) => resp.json())
43            .then((data: IOlympicData[]) => setRowData(data.slice(0, 600)));
44    }, []);
45    return (
46        <div style={containerStyle}>
47            <div style={gridStyle} className="ag-theme-alpine">
48                <AgGridReact<IOlympicData>
49                    rowData={rowData}
50                    columnDefs={columnDefs}
51                    defaultColDef={defaultColDef}
52                    ensureDomOrder={true}
53                    suppressColumnVirtualisation={true}
54                    suppressRowVirtualisation={true}
55                    onGridReady={onGridReady}
56                ></AgGridReact>
57            </div>
58        </div>
59    );