AG Grid custom detail for master detail view not rendering 'could not find function component'

Question

I am trying to get the ag-grid master-detail view to work with a custom detail view. The default detail view renders a grid, which is not what we need; however, I am running into problems when I try to supply a custom component for ag grid to render as per here. I have tried a couple options after reading through the docs in different places, but each of them seems to run into one issue or another, and wanted to ask if there is some ag-grid voodoo that I might be overlooking that should make this go smoothly/painlessly?

I have tried:

Option 1: using the 'detailCellRenderer' AgGrid option to directly inject a component. Like here

Option 2: using the 'components' option and setting the 'detailCellRenderer' key inside of that to a custom component.

Option 3: using both the 'components' and 'detailCellRenderer' options by setting the key value pair such that components['detailCellRenderer'] = detailCellRenderer, and passing in a string for 'detailCellRenderer' option to AgGrid, to register the component by name. Both option 2 and 3 were inspired by the docs here

Option4: trying to override the default cell renderer as described here, by setting the 'agGridDetailCellRenderer' in the 'components' option to my custom component.

I am just trying to get a basic custom cell rendering, and so I have taken the custom component from the docs here.

NOTE: I am using version 24.0.0 of ag-grid-react behind the scenes; the AGGrid component is just a simple wrapper that loads all of the enterprise version modules and some default props and such, and forwards everything to AGGridReact

Code for the various options below:

Option 1
const DetailCellRenderer = () => (
    <h1 style={{ padding: '20px' }}>My Custom Detail</h1>
  );

  const detailCellRenderer = useMemo<any>(() => {
    return DetailCellRenderer;
  }, []);

  const components = {
    detailCellRenderer: detailCellRenderer
  }

  return (
    <>
      <Box>
        <TableHeading />
        <ErrorOverlay
          errorMessage={ADVANCED_COMMISSION_ERROR}
          isErrorMessage={!!advancedCommissionTransactionsError}
        >
          <Box width="100%" maxWidth="1050px" marginTop={1} className={classes.agTable}>
            <Card>
              <AgGrid
                {...TRANSACTION_GRID_DEFAULT_PROPS}
                columnDefs={ADVANCED_COMMISSION_GRID_COLS}
                rowData={gridTransactionData}
                onGridReady={onGridReady}
                masterDetail={true}
                //components={components}
                detailCellRenderer={detailCellRenderer}
                detailCellRendererParams={{}}
              />
Option 2
const DetailCellRenderer = () => (
    <h1 style={{ padding: '20px' }}>My Custom Detail</h1>
  );

  const detailCellRenderer = useMemo<any>(() => {
    return DetailCellRenderer;
  }, []);

  const components = {
    detailCellRenderer: detailCellRenderer
  }

  return (
    <>
      <Box>
        <ErrorOverlay
          errorMessage={ADVANCED_COMMISSION_ERROR}
          isErrorMessage={!!advancedCommissionTransactionsError}
        >
          <Box width="100%" maxWidth="1050px" marginTop={1} className={classes.agTable}>
            <Card>
              <AgGrid
                {...TRANSACTION_GRID_DEFAULT_PROPS}
                columnDefs={ADVANCED_COMMISSION_GRID_COLS}
                rowData={gridTransactionData}
                onGridReady={onGridReady}
                masterDetail={true}
                components={components}
                // detailCellRenderer={detailCellRenderer}
                detailCellRendererParams={{}}
              />
Option 3
const DetailCellRenderer = () => (
    <h1 style={{ padding: '20px' }}>My Custom Detail</h1>
  );

  const detailCellRenderer = useMemo<any>(() => {
    return DetailCellRenderer;
  }, []);

  const components = {
    'detailCellRenderer': detailCellRenderer
  }

  return (
    <>
      <Box>
        <TableHeading />
        <ErrorOverlay
          errorMessage={ADVANCED_COMMISSION_ERROR}
          isErrorMessage={!!advancedCommissionTransactionsError}
        >
          <Box width="100%" maxWidth="1050px" marginTop={1} className={classes.agTable}>
            <Card>
              <AgGrid
                {...TRANSACTION_GRID_DEFAULT_PROPS}
                columnDefs={ADVANCED_COMMISSION_GRID_COLS}
                rowData={gridTransactionData}
                onGridReady={onGridReady}
                masterDetail={true}
                components={components}
                detailCellRenderer='detailCellRenderer'
                detailCellRendererParams={{}}
              />
Option 4
const DetailCellRenderer = () => (
    <h1 style={{ padding: '20px' }}>My Custom Detail</h1>
  );

  const detailCellRenderer = useMemo<any>(() => {
    return DetailCellRenderer;
  }, []);

  const components = {
    'detailCellRenderer': detailCellRenderer
  }

  return (
    <>
      <Box>
        <TableHeading />
        <ErrorOverlay
          errorMessage={ADVANCED_COMMISSION_ERROR}
          isErrorMessage={!!advancedCommissionTransactionsError}
        >
          <Box width="100%" maxWidth="1050px" marginTop={1} className={classes.agTable}>
            <Card>
              <AgGrid
                {...TRANSACTION_GRID_DEFAULT_PROPS}
                columnDefs={ADVANCED_COMMISSION_GRID_COLS}
                rowData={gridTransactionData}
                onGridReady={onGridReady}
                masterDetail={true}
                components={components}
                detailCellRenderer='detailCellRenderer'
                detailCellRendererParams={{}}
              />

The corresponding errors for each attempt (option 1,2,3,4) are as follows:

Option 1

Option 2

Option 3

Option 4

Answer 1

It turns out, as per the documentation for version 24.0.0, that in order to use custom components one first needs to register it using the 'frameworkComponents' prop, like so:

 const DetailCellRenderer = () => (
    <h1 style={{ padding: '20px' }}>My Custom Detail</h1>
  );

  const detailCellRenderer = useMemo<any>(() => {
    return DetailCellRenderer;
  }, []);

 <AgGrid
                {...TRANSACTION_GRID_DEFAULT_PROPS}
                columnDefs={ADVANCED_COMMISSION_GRID_COLS}
                rowData={gridTransactionData}
                onGridReady={onGridReady}
                masterDetail={true}
                detailCellRenderer={'advancedCommissionsDetailCellRenderer'}
                frameworkComponents={{ advancedCommissionsDetailCellRenderer: detailCellRenderer }}
              />

This is not required in version 27, which is what the docs default to, so the example provided there is not a complete one.