Использование реакционных хуков в функциональном HoC

Question

Я новичок в реакции хуков, поэтому не уверен, что есть лучший способ реализовать нижеприведенное.У меня есть функциональный HOC, который добавляет некоторые элементы управления, например.ответить, удалить и т. д. любому упакованному компоненту.Действия реализованы как пользовательский хук useActions, который использует функциональный HOC.Проблема, с которой я сталкиваюсь, заключена в обертку. Компонент не создается.

Мне нужно реализовать действие как HOC, поскольку внутренний обернутый компонент необходимо повторно использовать в различных компонентах, и только в некоторых сценариях требуется поддержка действий.Кроме того, чтобы сделать его функцией, как это нужно в activHooks, нам нужно поделиться с другими обработчиками действий и реализациями где-нибудь еще.Поэтому предпочтительны пользовательские хуки.

Попытка применить HOC на основе классов к wrappedComponent, и он работает нормально.Невозможно взломать или войти в код HOC, который возвращает JSX с wrappedComponent.

// Func HOC that consumes useAction hook. UseAction returns 
arr of actions [reply, delete ]

function ActivityActions(props) {
  const {
    activity,
    classes: {
      actionsContainer,
    },
  } = props;

  const [actions] = useActions(activity.ActivityType);

  return (
    actions.length ?
      <div className={actionsContainer}>
        <ul>
          {
            actions.map(action => (
              <li>
                <Button>
                  {action}
                </Button>
              </li>
            ))
          }
        </ul>
      </div >
      : null
  );
}

// HOC wrapping the component
export const withActions = wrappedComponent => props => (
  <div>
    <wrappedComponent {...props} />
    <activityActions {...props} />
  </div>
);

Wrapped Component ActivityItem export - (ActivityItem just renders some text)
export const ActivityListItem = withActions(ActivityItem);

Final app render 
export default function App() {
  const mockActivity = GetActivity(1, 2, 1, null);

  return (
    <div className="container">
      <span> Activity Item </span>
      <ActivityListItem activity={mockActivity} />
    </div>
  );
}

компонент не отображается.Ожидайте увидеть кнопки действий под обернутым текстом действия компонента, изображением.