React state not rendering ( array of objects ) using the Map function

I am able to retrieve data from Firebase and store it in the state of my component. The data is in the form of an array of objects :

[{name: "name", age: "age", location: "location", course: "course", interests: "interests"}, ...more users]

I use the map() function to map the data into a Bootsrap ListGroup:

let renderData = data.map((person) =>
<ListGroup>
  <ListGroupItem key = {person.name}><strong>Name: </strong>{person.name}</ListGroupItem>
  <ListGroupItem key = {person.age}><strong>Age: </strong>{person.age}</ListGroupItem>
  <ListGroupItem key = {person.location}><strong>Location: </strong>{person.location}</ListGroupItem>
  <ListGroupItem key = {person.course}><strong>Course: </strong>{person.course}</ListGroupItem>

  <ListGroupItem>
  </ListGroup>

    );

return (
   <div>
     {renderData}
   </div>
);