dynamically render the array at different labels inside return function react js

I am trying to render the values from array at different places in return function in the page using below code

   return (
  <div style={{ margin: 30 }}>
    <div className="form-group form-inline">
      <label style={{ display: 'margin-right:10px' }}>
      Section:</label> {requestDatasource[0].section}
    </div>
    <div className="form-group form-inline">
      <label style={{ display: 'margin-right:10px' }}>Type: </label> {requestDatasource[0].type}
    </div>
    <div className="form-group form-inline">
      <label style={{ display: 'margin-right:10px' }}>
      Requested By :     
      </label> {requestDatasource[0].createdBy}
    </div>
   <div className="form-group form-inline">
      <label style={{ display: 'margin-right:10px' }}>Requested Date: </label>

      {requestDatasource[0].createat}

    </div>
  </div>
 );

and i am filling array with the values like this below

if (requestData != null) {
requestData.allRequests.map((code) => {
  requestDatasource.push({
    id: code.id,
    section: code.masterSection.name,
    createdBy: code.createdBy,
    type: code.requestType.name,
    status: code.requestStage.name,
    createat: new Date(code.createdAt),
  });
  return null;
});
}

but somehow i am getting this error

 `Objects are not valid as a React child. If you meant to render a collection of children, use an array instead.`

I am not sure where i am going wrong with this code, Could any one please let me know what will be the problem with the above code in return method.

PS: i am using react js functional components

Thanks in advance