Реагировать | Повторно используемый компонент Dropdown с неработающим раскрывающимся списком Typecript

Question

Я хочу создать повторно используемый раскрывающийся список для кнопки и разрешить другим передавать любые нужные данные ей. Это сделано с Typescript, с которым я не очень опытный, но я заставил его работать:

Проблема в том, что данные отображаются не в раскрывающемся списке, а на странице под ним

Код

import React, { Fragment } from 'react';

import './index.scss';

export interface Props {
  isOpen: boolean;
  options: number;
  data: any;
  select: any;
}

const data = ['one', 'two'];

function HeaderMenuButton<T extends object>(props: Props & T): JSX.Element {
  const { isOpen, options, ...otherProps } = props;
  return (
    <Fragment>
      <i className="fa fa-ellipsis-h fa-lg circle" {...otherProps}>
        {data[options]}
      </i>
      <ul className={isOpen ? 'active' : null}> // I think there is something wrong here..
        {data.map((item, i) => (
          <li key={i} className={i === options ? 'selected' : null} onClick={() => props.select(i)}>
            {item}
          </li>
        ))}
      </ul>
    </Fragment>
  );
}

export default HeaderMenuButton;

ОБНОВЛЕНО, таблица стилей ...

.circle {
  width:3em;
  height:3em;
  border:1px solid  grey;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0.5em;
  border-radius: 50%;
  box-sizing: border-box;
 }

Я также использую загрузчик в приложении. Таким образом, решение оттуда также возможно ..

Может ли кто-нибудь помочь мне, заставить его работать. Я имею в виду, что с этим не так, я не уверен. Кроме того, я получаю эту ошибку, говоря:

Non-interactive elements should not be assigned mouse or keyboard event listeners.eslint(jsx-a11y/no-noninteractive-element-interactions)