Storybook контролирует диспергаторы при переносе компонента в HOC

У меня есть компонент в моем сборнике рассказов, который имеет некоторые элементы управления и выглядит так в пользовательском интерфейсе.

Но когда я оборачиваю свой компонент в HOC export default withAlign(Avatar), он ломается и не отображает никаких элементов управления, а раздел элементов управления заменяется следующим текстом: No inputs found for this component. Read the docs

Вот мой код для историй index.stories.tsx

import { Meta } from '@storybook/react'
import Avatar from '../Avatar'
export { AvatarColor } from './AvatarColor.stories'
export { Default } from './AvatarDefault.stories'

export default {
  title: 'Components/Avatar',
  component: Avatar,
  parameters: {
    docs: {
      description: {
        component: `An Avatar is a graphical representation of a user, team, or entity.
        Avatar can display an image, icon, or initials, and supports various sizes and shapes.`,
      },
    },
  },
  decorators: [
    (Story) => (
      <div
        style = {{
          display: 'flex',
          gap: '5px',
          flexWrap: 'wrap',
        }}
      >
        <Story />
      </div>
    ),
  ],
} as Meta

AvatarDefault.stories.tsx

import Avatar from '../Avatar'
import { AvatarProps } from '../Avatar.types'

export const Default = (props: Partial<AvatarProps>) => (
  <Avatar {...props}>Yooo</Avatar>
)

И тогда у меня есть мой тип

import { HTMLAttributes } from 'react'

export type AvatarProps = Omit<HTMLAttributes<HTMLElement>, 'color'> & {
  /**
   * The Size.
   *
   * @default 50
   */
  size?: number
  /**
   * The prop.
   * @default 80
   */
  someotherprop?: number
  /**
   * The color.
   *
   * @default "red"
   */
  color?: string
}

Любая идея, как я могу отображать элементы управления при обертывании моего компонента в HOC?