Dropdown menu is not showing over table: Tailwind, React

Hi I'm very new to Tailwind.

I'm making a dropdown menu visible, which is located in a table cell, but it is under the table, not overflowing outside the table scroll bar. My table is a horizontal scrollable table. I give the dropdown z-index as much as possible. But it is not working. Please help.

TableBody.jsx

import React from 'react';
import _ from 'lodash';
import TableCell from './tableCell';
import Popup from './popup';

const popupItems = [{ label: 'Edit'}, { label: 'Delete' }];

const TableBody = ({
  rows,
  hiddenColumns,
  checkedItems,
  addCheckedItem,
  removeCheckedItem,
}) => {
  const handleToggle = (event, checkedItem) => {
    if (event.target.checked) {
      addCheckedItem(checkedItem);
    } else {
      removeCheckedItem(checkedItem);
    }
  };

  return (
    <tbody>
      {rows.map((item, index) => (
        <tr key={index} className="hover:bg-gray-100 cursor-pointer">
          <td>
            <div className="relative">
              <Popup items={popupItems} />
            </div>
          </td>
          <TableCell value={index + 1} />
          {_.entries(item).map((pairs, value) => {
            if (hiddenColumns && !hiddenColumns.includes(pairs[0])) {
              return <TableCell key={value} value={pairs[1]} />;
            }
          })}
        </tr>
      ))}
    </tbody>
  );
};

export default TableBody;

Popup.jsx

import React from 'react';

const Popup = ({ items }) => {
  return (
    <div className="absolute left-0 bg-white p-2 mt-1 rounded-lg shadow-md border z-50">
      {items.map((item) => (
        <div
          key={item.label}
          className="bg-indigo-200"
        >
          <span className="px-3 align-middle text-xs">{item.label}</span>
        </div>
      ))}
    </div>
  );
};

export default Popup;