Objects are not valid as a React child – having to access to two children

I used the lookup function from mongodb and my output consists of two objects. It successfully retrieved via Postman, but Iam unable to display it on the react app.

This is the backend code to get the output from monogodb.

  router.get("/employeepoints", (req, res) => {
  let empno = req.params.name;
  employees.aggregate([{ 
      $lookup: {
        from:"assignment_assignedtostaffs",
        localField:"empno",
        foreignField:"emp_no",
        as:"progress"
        }}  
      ])
    .exec((err, check) => {
      var l = check.length;
      return res.status(200).json({
        success: true,
        check: check,
        l: l,
      });
    });
});

Output from Postman

{
   "success": true,
   "check": [
      {
         "_id": "6138f90bcf5f00948da795bb",
         "empno": 69,
         "name": "Nandasena",
         "progress":[
            {
               "_id": "6139a1336d16d204cc9b7504",
               "assignment_name": "Assignment2",
               "client_no": "clie3",
               "execid": "exec20",
               "place_of_engagement": "California",
               "distance": 4,
               "date_of_allocation": "2021-09-02T00:00:00.000Z",
               "deadline": "2021-09-18T00:00:00.000Z",
               "emp_no": 69,
               "progress": "Working",
               "__v": 0,
               "travel_allowance": 350
            }
         ]
      }
   ]
}

Getting the above output via React. I can access the elements in check but not progress. How do I access the elements in progress as shown above.

            <tbody class="tbody1">
              {this.state.employee.map((employees, index) => (
                <tr key={index}>
                  <td>
                    <a href={``} style={{ textDecoration: "none" }}>
                      {employees.empno}
                    </a>
                  </td>
                  <td>{employees.name}</td>
                  <td>{employees.email}</td>
                  <td>{employees.commencement_date}</td>
                  <td>{employees.progress.distance}</td>
                  <td>1</td>
                  <td>
}

Answer

You should loop through the employees.progress array to return a new td cell for every item in the array and using the id as the key.

...
<td>{employees.commencement_date}</td>
{employees.progress.map(item => (
    <td key={item.id}>
        {item.distance}
    </td>
))}
<td>1</td>