Tener este diseño:

Hay una tabla con algunas filas, cuando se hace clic en una fila, se ve ese botón de kebab (3 puntos verticales).

Cuando se hace clic en el botón, debería abrir un elemento que contiene algunos datos, en este caso, una lista de acciones.

La parte que muestra el botón kebab está funcionando:

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

cuando se hace clic en la fila, se ve el botón de 3 puntos. También hay un booleano que inicialmente se establece en falso pero cambia su valor cuando se hace clic en el botón ( toggleModal ).

Pero, ¿cómo puede ese elemento con la lista agregada debajo del botón?

Hecho algo como:

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

¿O tal vez hay alguna solución en línea para solucionar esto?