update grid by async function - react - reactjs

Question

I have this function - to manage grid and to create it:
export default function CustomizableComponents({ direction }) {
const [rows, setRows] = useState(ComponentDidMount);
const [sortColumns, setSortColumns] = useState([]);
const [selectedRows, setSelectedRows] = useState(() => new Set());
const sortedRows = useMemo(() => {
if (sortColumns.length === 0) return rows;
return [...rows].sort((a, b) => {
for (const sort of sortColumns) {
const comparator = getComparator(sort.columnKey);
const compResult = comparator(a, b);
if (compResult !== 0) {
return sort.direction === 'ASC' ? compResult : -compResult;
}
}
return 0;
});
}, [rows, sortColumns]);
return (
<DataGrid
className="fill-grid"
columns={columns}
rows={sortedRows}
sortColumns={sortColumns}
onSortColumnsChange={setSortColumns}
selectedRows={selectedRows}
onSelectedRowsChange={setSelectedRows}
renderers={{ sortStatus, checkboxFormatter }}
direction={direction}
/>
);
}
And, I have this function (to get the data from server):
async function ComponentDidMount() {
// GET request using fetch with async/await
const response = await fetch('https://localhost:7198/api/FilesDetails/GetListDetails');
const data = await response.json();
for (let i = 1; i < 10; i++) {
rows.push({
id: data[i].name,
name: data[i].name,
startTime: data[i].name,
endTime: data[i].name
});
}
return rows;
}
It reaches the function, and fills the rows,
But the datagrid remains empty and does not fill.
Where am I wrong?
Thanks