Wrapper every 3 items in a listing

Question

I have an api that returns me a list of customers and I have the following layout, my question is how to put the light gray bg div every 3 items. Just follow my code.

<Grid container justify="flex-start" spacing={2}>
  {data.map((profile) => (
    <Grid item xs={12} sm={6} md={4}>
      <CardProfile profile={profile} />
    </Grid>
  ))}
</Grid>