Basic ag-grid table keeps automatically increasing height/top infinitely - css

Question

I have a barebone React component that uses AG-Grid to render out a table. But I'm running into this issue where the height/top automatically keeps increasing, without any input from me.
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-material.css";
render () {
const colDef = [{
headerName: "Make", field: "make",
}, {
headerName: "Model", field: "model",
}, {
headerName: "Price", field: "price",
}];
const dataRows = [{
make: "Toyota", model: "Celica", price: 35000,
}, {
make: "Ford", model: "Mondeo", price: 32000,
}, {
make: "Porsche", model: "Boxter", price: 72000,
}];
return (
<div className={`ag-theme-material`}>
<AgGridReact
columnDefs={colDef}
rowData={dataRows}
/>
</div>
)
}
I inspected the elements that changes. It looks like Top keeps increasing automatically for this div:
<div class="ag-floating-bottom" role="presentation" style="height: 0px; top: 422px;">
and Height for this, and I have no idea why:
<div class="ag-body ag-row-no-animation" role="presentation" style="height: 516px; top: 56px;">
Note that I tried the other build in themes for ag-grid and ran into the same issue.