How to insert additional element inside TableRow conditionally

Question

I am working with Next.js, Next UI. I am trying to have a usual table with 3 columns, but inside some rows there will be additional content that is hidden in other rows. That content should span through all 3 columns and will be another table that I would toggle on/off with a button inside parent table itself.

This is what I tried:

<TableBody items={datasources}>
      {(item) => (
        <React.Fragment key={item.id}>
          <TableRow key={item.id}>
            {(columnKey) => (
              <TableCell key={columnKey}>
                {renderCell(item, columnKey)}
              </TableCell>
            )}
          </TableRow>
          {item.name === "PSD2" && (
            <TableRow>
              <TableCell colSpan={3}>
                additional content
              </TableCell>
            </TableRow>
          )}
        </React.Fragment>
        )}
    </TableBody>

It does not work with the following error:

Unhandled Runtime Error
TypeError: Cannot convert a Symbol value to a string

Call Stack
$eb2240fc39a57fa5$export$bf788dd355e3a401.getFullNode
node_modules/@react-stately/collections/dist/import.mjs (205:52)
getFullNode.next
<anonymous>
eval
node_modules/@react-stately/collections/dist/import.mjs (268:0)
Generator.next
<anonymous>
[Symbol.iterator]
node_modules/@react-stately/collections/dist/import.mjs (289:0)
Generator.next
<anonymous>
visit
node_modules/@react-stately/table/dist/import.mjs (688:0)
new $788781baa30117fa$export$596e1b2e2cf93690
node_modules/@react-stately/table/dist/import.mjs (690:0)
eval
node_modules/@react-stately/table/dist/import.mjs (739:76)
eval
node_modules/@react-stately/collections/dist/import.mjs (316:0)
mountMemo
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (12440:0)
Object.useMemo
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (13138:0)
useMemo
node_modules/next/dist/compiled/react/cjs/react.development.js (1771:0)
$7613b1592d41b092$export$6cd28814d92fa9c9
node_modules/@react-stately/collections/dist/import.mjs (310:35)
$4a0dd036d492cee4$export$907bcc6c48325fd6
node_modules/@react-stately/table/dist/import.mjs (739:45)
useTable
node_modules/@nextui-org/table/dist/chunk-774VMS2G.mjs (43:29)
eval
node_modules/@nextui-org/table/dist/chunk-HH2KD3YZ.mjs (40:14)
renderWithHooks
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (11009:0)
updateForwardRef
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (15665:0)
beginWork$1
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (18408:0)
beginWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26741:0)
performUnitOfWork
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25587:0)
workLoopSync
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25303:0)
renderRootSync
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (25258:0)
recoverFromConcurrentError
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24475:0)
performConcurrentWorkOnRoot
node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (24420:0)
workLoop
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (261:0)
flushWork
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (230:0)
MessagePort.performWorkUntilDeadline
node_modules/next/dist/compiled/scheduler/cjs/scheduler.development.js (534:0)

Is there a way to have additional row below my row? Is there maybe other way to toggle display of additional table?