ReactJS | Многоразовый компонент с Typescript

Question

Моя цель с этим компонентом - иметь кнопку / ссылку / и т. Д., Которая отображает onClick, выпадающее меню. Тогда давайте перейдем к функциональности. Я хочу сделать следующее:

1. Дескриптор onClick для открытия / закрытия выпадающего меню.
2. Возьмите массив объектов с {label: "string", Icon="React Component"} и отобразите эти Предметы. Компонент Icon очень прост и размещен ниже.

Я немного застрял, но добился определенного прогресса. Вот компонент Icon:

import React from 'react';
import PropTypes from 'prop-types';
import 'font-awesome/css/font-awesome.min.css';

const Icon = props => {
  const { icon, className, ...rest } = props;
  return <i {...rest} className={`fa fa-${icon} ${className}`} aria-hidden="true" />;
};

Icon.defaultProps = {
  className: ''
};

Icon.propTypes = {
  icon: PropTypes.string.isRequired,
  className: PropTypes.string,
  type: PropTypes.string
};

export default Icon;

Вот что у меня есть для выпадающего меню:

import React, { Component, Fragment } from 'react';
import Icon from './Icon';

import './index.scss';

export interface Props {
  options: string;
  data: any;
  onselect: any;
  item: string;
}
export interface State {
  isOpen: boolean;
}

const data = [{'one', 'cog'}, {'two', 'lock'}];

class HeaderMenuButton extends Component<Props, State> {
  public readonly state: Readonly<State> = {
    isOpen: false
  };

  onHandleclick = () => {
    this.setState({
      isOpen: true
    });
  };

  render() {
    const { isOpen } = this.state;
    const { options } = this.props;
    return (
      <Fragment>
        <i className="fa fa-ellipsis-h fa-lg circle">{data[options]}</i>
        {isOpen}{' '}
        <ul className="dropdown-menu">
          {data.map((item) => (
            <li key={item} className={item === options ? 'selected' : null}>
              <Icon
                onClick={() => this.onselect(item)}
                icon="cog"
                label={item}
              />
            </li>
          ))}
        </ul>
      </Fragment>
    );
  }
}

export default HeaderMenuButton;

Скажу вам правду, я близок к тому, чтобы отказаться от второго компонента и сделать его снова. Не могли бы вы помочь мне разобраться в моей ситуации.