Esri ArcGIS Integrating Custom API Data with React js FeatureTable

Question

I'm new to argis, I'm trying to Integrate a Custom API Data with React js FeatureTableBelow is my sample code:
Here in this code I'm using the esri to load the widgets and show the basemap and others this everything working fine i need to fix the table in arcgis.

import { Box } from '@mui/material';
import React, { useEffect } from 'react';
import { loadModules } from 'esri-loader';

export default function Home() {
  useEffect(() => {
    loadModules(['esri/WebMap', 'esri/views/MapView', 'esri/layers/FeatureLayer', 'esri/widgets/FeatureTable'], { css: true })
      .then(([WebMap, MapView, FeatureLayer, FeatureTable]) => {
        let webmap = new WebMap({
          portalItem: {
            id: '' 
          }
        });

        let view = new MapView({
          container: 'viewDiv',
          map: webmap
        });

        view.when(() => {
          const featureLayer = new FeatureLayer({
            portalItem: {
              id: '' //feature layer id
            },
            outFields: ['*'],
            title: 'Customer'
          });

          webmap.add(featureLayer);

          const featureTable = new FeatureTable({
            view: view,
            layer: featureLayer,
            multiSortEnabled: true,
            editingEnabled: true,
            tableTemplate: {
              columnTemplates: [
                // Column template configurations
              ]
            },
            container: 'tableDiv'
          });

          view.ui.add(featureTable, 'bottom');
        });
      })
      .catch(error => {
        console.error('Error loading modules:', error);
      });
  }, []);

  return (
    <Box>
      <Box id='viewDiv' sx={{ flex: '1', width: '100%' }}></Box>
      <Box id='tableDiv' sx={{ flex: '1', width: '100%' }}></Box>
    </Box>
  );
}