Can't properly instanciate a Google Map when using pagination

Question

I've been struggling a lot lately with the pagination of a list.

The issue

Each element of that list contains a tiny map and several other information. That list was displaying the map of each row the right way without pagination but I have performance issues when the size of that list exceed ~50 elements (since each instance of a Google Map isn't light).

That's why I added a pagination system so the page runs smoothly with all client devices. The problem is that when I browse pages, the content of the list items change but the map content is not updated. In other words, the pagination seems to work to navigate through the rows I want to display, but the Google Map instances are displaying the content of the first page only and there aren't updated.

The code involved

The map is created with :

const mapCentered = (data, center) => {
    return (
        <div style={{ height: '150px', width: '150px' }}>
            <GoogleMapReact
            bootstrapURLKeys={{ key: "myKey" }}
            defaultCenter={center}
            defaultZoom={19}
            options={map => ({ 
                mapTypeId: map.MapTypeId.SATELLITE,
                ...
            })}
            yesIWantToUseGoogleMapApiInternals
            onGoogleApiLoaded={({ map, maps }) => {
                // Construct the polygon.
                var triangle = new maps.Polygon({
                    paths: data,
                    ...
                });
                triangle.setMap(map);
            }}
            >
            </GoogleMapReact> 
        </div>
    )
}

The result list (of rows) is created using :

data.map((result, index) => { 
    var googleMapsCoords = result.coord;
    const center = result.center;

    rows.push(
    <div id={index}>
        <ListItem>
            <Grid container direction="row" spacing={1}>
                <Grid item xs={5}>
                {mapCentered(googleMapsCoords, center)}
                </Grid>
                // some more code
            </Grid>
        </ListItem>
    </div>
    )
}

And finally the pagination is handled by :

<Table className={classes.table} aria-label="pagination table" >
      <TableBody>
      {(rowsPerPage > 0
          ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
          : rows
      ).map((row, index) => {
          return (
          <TableRow key={row.name}>
             <TableCell component="th" scope="row">
                  <div>
                      {row}
                  </div>
              </TableCell>
          </TableRow>
          )}
      )}
      </TableBody>
      <TableFooter>
          // the footer
      </TableFooter>
</Table>

I don't get why rows content which is a Google Map instance is not handled. Is it because of the slice ? Or the way I create it when populating the rows?

Thanks in advance for any tip regarding this!

Cheers