Using prop formatter - element inside don't stop rendering

Question

I'm using prop formatter in a column, to render a children element. And it's not working properly.

The element inside formatter, don't stop rendering. This blocks the event of the element inserted into the formatter.

Like this: image DOM

My code:

const columns: any[] = [
    {
      key: _moreOptionsAbbrevKey,
      name: _moreOptionsAbbrevDesc,
      width: 40,
      maxWidth: 40,
      resizable: false,
      sortable: false,
      frozen: true,
      formatter({ row }) {
        return (
          <>
            <div
              onClick={() => handleShowMoreOptions(row)}
            >
              {row.id}
            </div>
          </>
        );
      }
    },
    {
      key: 'id',
      name: 'Código',
      width: 200
    },

I'm using Next.js with TailwindCSS.

If anyone can help I appreciate it.