How can I group rows in react-data-table-component? - reactjs

Question

I am facing a problem when I need to group rows in a table using react-data-table-component.
My dataset:
const cars = [{
"brand": "audi",
"model": "a4",
"hp": "200",
},
{
"brand": "audi",
"model": "a5",
"hp": "300",
},
{
"brand": "audi",
"model": "rs6",
"hp": "500",
},
{
"brand": "tesla",
"model": "model 3",
"hp": "200",
},
{
"brand": "tesla",
"model": "model x",
"hp": "450",
}
];
The table should be structured like this:
How can I achieve this?
I am using hook-like style.
One can use cell property to render. So I create some index to track which brand has already been rendered and if a brand is already on the table it just returns an empty cell.
The code I am using:
const [brandIndex, setBrandIndex] = useState<(string | undefined)[]>([]);
const renderBrand = useCallback((row: CarDto) => {
const alreadyRendered = brandIndex.some(b => b === row.brand);
if (alreadyRendered) {
return null;
} else {
setBrandIndex(brandIndex.concat(row.brand));
return <span>{row.brand}</span>;
}
},[setBrandIndex, brandIndex])
//...
{
id: "brand",
name: "Brand",
selector: (row) => row.brand || "",
cell: renderBrand,
sortable: true,
resizable: true,
width: "200px",
},
Unfortunately this code is not working, all brands in my table are empty after rendering. The table renders a lot of times, so I assume that index contains all brands. The last rendering returns null in the first column.