ag-grid-react cellrenderer Class base component, Function base Component Error

Question

I have a question about ag-grid cellender.

When using CellRender, the Class Base Component does not fail. An error is generated when using Function Base Component.

I am using the material ui and would like to create a Button Action through the Cell Render and Function Base Component.

const columnDefs = [
  {
    field: 'action',
    headerName: 'Action',
    cellRenderer: 'actionRenderer',
  },
]

<AgGridReact
    style={TableStyle}
    rowData={codeData}
    rowSelection="multiple"
    suppressRowClickSelection={true}
    columnDefs={columnDefs}
    onSelectionChanged={handleSelectionChange}
    frameworkComponents={{
        actionRenderer: ActionRenderer,
    }}
/>

Class Base Component CellRenderer is Not Error

import { Button } from '@material-ui/core';
import React, { Component } from "react";

export default class ActionRenderer extends Component {

    render() {
        return (
          <Button>
            Button
          </Button>
        );
    }
}

Function Base Component CellRenderer is Error

import { Button } from '@material-ui/core';
import React from "react";

function ActionRenderer() {
    return (
        <Button>
            Button
        </Button>
    );
}
export default ActionRenderer

This Error Message

reactComponent.js:57 [Violation] Added synchronous DOM mutation listener to a 'DOMNodeInserted'event. Consider using MutationObserver to make the page more responsive.
ReactComponent.init @ reactComponent.js:57
UserComponentFactory.initComponent @ ag-grid-community.cjs.js:13428
UserComponentFactory.createAndInitUserComponent @ ag-grid-community.cjs.js:13181
UserComponentFactory.newCellRenderer @ ag-grid-community.cjs.js:13119
createCellRendererFunc @ ag-grid-community.cjs.js:19360
AnimationFrameService.executeFrame @ ag-grid-community.cjs.js:35597

reactComponent.js:57 Location is = /node_modules/ag-grid-react/lib/reactComponent.js:57

    ReactComponent.prototype.init = function (params) {
    var _this = this;
    this.eParentElement = this.createParentElement(params);
    this.renderStaticMarkup(params);
    if (this.isStatelessComponent()) {
        this.eParentElement.addEventListener('DOMNodeInserted', this.statelessDomInsertedListener, false);
    }
    

I've been searching for the DOMNodeInserted and MutationObserver in ag-grid-react for the past week, and I've seen the official documents, but I haven't found anything.

Please help me.