javascript – react material ui pupulate table using API

I am trying to populate the StickyTable template in react. I am not seeing anyhting in my console log but an empty array.

Is there anything obvious that I am missing in my code? I cannot seem to figure out where I am going wrong with this and perhaps a second pair of eyes could help me.

I know my backend is working properly but there is something going wrong on this frontend code

export default function StickyHeadTable() { 
    const rows = useState( [
      createData(1, "fruit ID", 'fruitId'),
      createData(2, "fruit Name", 'fruitName'),
      createData(3, "Fruit Price", 'fruitPrice'),

    ]);

    const [dataRows] = useState([]);
    const [data, setData] = useState("");
  
  useEffect(() => {
     
    (async () => {
    fetch(SERVER_URL + "fruits/")
    .then((response) => response.json())
    .then(rowData => {
      // fruits: responseData
      const data= dataRows.map((a) => {
        const dataRows = [];
        this.state.rows.forEach((a, i) => {
          dataRows.push(createData(a.FruitId, a.fruitType, a.fruitPrice));
      });
      })
      console.log("rows", dataRows);
    })

  })();
});

  return (
    <Paper sx={{ width: "100%", overflow: "hidden" }}>
      <TableContainer sx={{ maxHeight: 440 }}>
        <Table stickyHeader aria-label="sticky table">
          <TableHead>
            <TableRow>
              {columns.map((column) => (
                <TableCell
                  key={column.id}
                  align={column.align}
                  style={{ minWidth: column.minWidth }}
                >
                  {column.label}
                </TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.map((row) => {
              return (
                <TableRow
                  hover
                  role="checkbox"
                  tabIndex={-1}
                  key={row.Attribute}
                >
                  {columns.map((column) => {
                    const value = row[column.id];
                    return (
                      <TableCell key={column.id} align={column.align}>
                        {column.format && typeof value === "number"
                          ? column.format(value)
                          : value}
                      </TableCell>
                    );
                  })}
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </TableContainer>
    </Paper>
  );
}