React table drawn by a map is very slow to load

I have an accordion that when it is expanded will display a table which is drawn using a map based on data. There is less than 20 rows ever drawn but it takes a few seconds to load, this is not an api issue as the data is returned in less than 20 ms.

It doesn't feel normal that it would take this long to load, but if that's the case then I would like to display a loading icon until it is loaded. The issue I'm having with doing this is that I want to wait for the map to finish writing the table before displaying it, but there doesn't seem to be a good way to wait for this to happen.

Here is my code.

 <TableContainer component={Paper} >
    <Table size="small" aria-label="purchases" sx=>
      <TableHead>
        <TableRow>
          <TableCell align="left"><b>Resource Id</b></TableCell>
          <TableCell align="left"><b>Resource Type</b></TableCell>
          <TableCell align="center"><b>Opened On</b></TableCell>
          <TableCell align="center"><b>Potential Savings</b></TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {props.data?.map((item, i) => (
          <TableRow key={i}>
            <TableCell>{item.resource_id}</TableCell>
            <TableCell>{item.resource_type}</TableCell>
            <TableCell align="center">{item.observerd_at}</TableCell>
            <TableCell align="center">{formatCurrency(item.saving)}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </TableContainer>

And the accordion which loaded the above in "AccountEvents"

<Accordion>
         ...
            <div className="row">
              <Divider color="grey" />
              <Box sx=>
                <Typography align="left">
                  <b>Account #: </b>{item.account_id}
                </Typography>
              </Box>
              <Divider color="grey" />
              <Box sx=>
                <AccountEvents data={recommendations ? recommendations : null} />
              </Box>
            </div>
          </AccordionDetails>
        </Accordion>

from React table drawn by a map is very slow to load