Dropdown options not working in React-Bootstrap-Table

Question

I'm trying to implement a dropdown options when clicking on the ellipsis.

When I click on the ellipsis button, it will show a dropdown with Edit and maybe other options.

Something like this:

Now when it is clicked, the dropdown state becomes true, but when clicked again, it remains as true and won't change its state back to false, so the dropdown remains opened.

I'm using the formatter attribute to show the ellipsis button for each row.

I've been working on this but still can't seem to figure out what exactly is wrong with the state.

const [dropdown, setShowDropdown] = useState(false);
const handleDropDown = () => setShowDropdown(!dropdown);

function optionsFormatter(cell, row, rowIndex, formatExtraData) {
    return (
      <div
        style={{
          cursor: "pointer",
          lineHeight: "normal",
          display: "flex",
          justifyContent: "space-between"
        }}
      >
        <FaIcons.FaEllipsisH onClick={handleDropDown} style={{cursor: 'pointer'}} />
      </div>
    );
  }

CodeSandbox Demo