Fill Grid component with Data from MongoDB records

I have data stored in a MongoDB collection. I can get the data with the following

const [recruitList, setRecruitList] = useState([]);
useEffect(() => {
  axios.get('http://localhost:8080/read').then((res) => {
    setRecruitList(res.data);
  });
}, []);

Now, I have the following Grid Component from @syncfusion/ej2-react-grids

import * as React from 'react';
import { Grid, GridModel } from '@syncfusion/ej2-grids';
import { DefaultHtmlAttributes } from '@syncfusion/ej2-react-base';
export interface GridTypecast {
    rowTemplate?: string | Function | any;
    detailTemplate?: string | Function | any;
    toolbarTemplate?: string | Function | any;
    pagerTemplate?: string | Function | any;
    editSettingsTemplate?: string | Function | any;
    groupSettingsCaptionTemplate?: string | Function | any;
}
/**
 * `GridComponent` represents the react Grid.
 * ```tsx
 * <GridComponent dataSource={data} allowPaging={true} allowSorting={true}/>
 * ```
 */
export declare class GridComponent extends Grid {
    state: Readonly<{
        children?: React.ReactNode | React.ReactNode[];
    }> & Readonly<GridModel & DefaultHtmlAttributes | GridTypecast>;
    setState: any;
    private getDefaultAttributes;
    initRenderCalled: boolean;
    private checkInjectedModules;
    directivekeys: {
        [key: string]: Object;
    };
    private immediateRender;
    props: Readonly<{
        children?: React.ReactNode | React.ReactNode[];
    }> & Readonly<GridModel & DefaultHtmlAttributes | GridTypecast>;
    forceUpdate: (callBack?: () => any) => void;
    context: Object;
    portals: any;
    isReactComponent: Object;
    refs: {
        [key: string]: React.ReactInstance;
    };
    constructor(props: any);
    render(): any;
}

Orders.js

Calling GridComponent like so.

<GridComponent
  id="gridcomp"
  dataSource={ordersData}
  allowPaging
  allowSorting
  allowExcelExport
  allowPdfExport
  contextMenuItems={contextMenuItems}
  editSettings={editing}
>
  <ColumnsDirective>
    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
    {ordersGrid.map((item, index) => <ColumnDirective key={index} {...item} />)}
  </ColumnsDirective>
  <Inject services={[Resize, Sort, ContextMenu, Filter, Page, ExcelExport, Edit, PdfExport]} />
</GridComponent>

This is the dataSource parameter also from the same project @syncfusion/ej2-react-grids

    * @default []
    * @isGenericType true
    */
dataSource: Object | DataManager | DataResult;

For now, if I do this in

dummy.js

export const ordersData = [
  {
    Degree: 10248,
    RecruitName: 'Vinet',

    RecruitEmail: 32.38,
    PhoneNumber: '51481369',
    Skills: 'USA',
    Status: 'pending',
    StatusBg: '#FB9678',
    ProductImage:
      product6,
  },
];

This static data is displayed. And I can keep generating as many rows in the grid as I want statically. But I didn't know how I can pass data from all my collection records there instead.

This is the structure of the grid:

dummy.js

export const ordersGrid = [
  {
    headerText: 'Image',
    template: gridOrderImage,
    textAlign: 'Center',
    width: '120',
  },
  {
    field: 'RecruitName',
    headerText: 'Name',
    width: '150',
    editType: 'dropdownedit',
    textAlign: 'Center',
  },
  { field: 'RecruitEmail',
    headerText: 'Email',
    width: '150',
    textAlign: 'Center',
  },
  { field: 'PhoneNumber',
    headerText: 'Phone Number',
    width: '150',
    textAlign: 'Center',
  },
  {
    headerText: 'Status',
    template: gridOrderStatus,
    field: 'OrderItems',
    textAlign: 'Center',
    width: '120',
  },
  {
    field: 'Degree',
    headerText: 'Degree',
    width: '120',
    textAlign: 'Center',
  },

  {
    field: 'Skills',
    headerText: 'Skills',
    width: '150',
    textAlign: 'Center',
  },
];