Tanstack table v8 - conditionally render content in cell

Question

I have a table and would like to conditionally render a tooltip on hover of a cell.

Is this possible?

My content is conditionally rendered outside of the table, but won't work when adding to the cell.

My onmouse events work as expected.

Here is some example code:

  const [showTooltip, setShowTooltip] = useState(false);


 {
        header: 'Status',
        accessorKey: 'status',
        cell: (row) => (
          <div
            onMouseEnter={() => {
              setShowTooltip(true);
            }}
            onMouseLeave={() => {
              setShowTooltip(false);
            }}
          >
            {getCellCopyDependantOnStatus(row, copyConfig)}
            {showTooltip && 'Tooltip'}
          </div>
        ),
      },