Having this design:

There is a table with some rows, when a row is clicked, that kebab button (3 vertical dots) is visible.

When the button is clicked it should open an element which has some data in it - in this case a list of actions.

The part with showing the kebab button is working:

{
  id: 'my-button',
  Cell: ({ cell }: CellProps<MyCell>) => {
    if (cell.row.index === selectedIndex) {
      return (
        <div>
          <Button
            icon={<ThreeDots />}
            onClick={toggleModal}
          />
        </div>
      );
    }
    return <div></div>;
  }
}

when the row is clicked, the 3-dots button is visible. There is also a boolean which is initially set to false but toggles its value when the button is clicked (toggleModal).

But how can that element with the list added under the button?

Done something like:

{isModalOpened ? <div className='absolute'>test</div> : null}

Or maybe is there any online solution to fix this?