Creating a storybook for a component with children

[zeuscronos]

I have the following code:

(notice I'm using: storybook: 7.0.23)

package.json

{
  "name": "chatscope",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.37",
    "@types/react": "^18.2.14",
    "@types/react-dom": "^18.2.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "plugin:storybook/recommended"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@storybook/addon-essentials": "7.0.23",
    "@storybook/addon-interactions": "7.0.23",
    "@storybook/addon-links": "7.0.23",
    "@storybook/blocks": "7.0.23",
    "@storybook/preset-create-react-app": "7.0.23",
    "@storybook/react": "7.0.23",
    "@storybook/react-webpack5": "7.0.23",
    "@storybook/testing-library": "0.0.14-next.2",
    "babel-plugin-named-exports-order": "0.0.2",
    "eslint-plugin-storybook": "^0.6.12",
    "prop-types": "15.8.1",
    "storybook": "7.0.23",
    "webpack": "5.88.0"
  }
}

Image.tsx

import React, { forwardRef, useImperativeHandle, useRef } from "react";

export interface ImageProps {
  name?: string;
  src?: string;
  style?: React.CSSProperties;
}

interface ImageRef {
  focus: () => void;
}

const ImageInner: React.ForwardRefRenderFunction<ImageRef, ImageProps> = (
  {
    name,
    src,
    style,
  },
  ref
) => {

  const avatarRef = useRef<HTMLDivElement>(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      avatarRef.current?.focus();
    },
  }));

  return (
    <div
      ref={avatarRef}
      style={{
        display: "inline-block",
        ...style,
      }}
    >
      <img src={src} alt={name} />
      {
        name && (
          <div style={{ textAlign: 'center' }}>{name}</div>
        )
      }
    </div>
  );
};

export const Image = forwardRef(ImageInner);

ImageGroup.tsx

import React, { ReactElement } from "react";
import { ImageProps } from "../Image/Image";

interface ImageGroupProps {
  children: ReactElement<ImageProps>[];
}

export const ImageGroup: React.FC<ImageGroupProps> = ({
  children,
}) => {

  return (
    <div>
      {
        children.map((child, index) => {
          return React.cloneElement(child, {
            key: index,
            name: `[${child.props.name}]`,
            style: {
              opacity: 0.9,
              margin: '4px',
            },
          });
        })
      }
    </div>
  );
};

Image.stories.ts

import type { Meta, StoryObj } from '@storybook/react';
import { Image } from '../components/Image/Image';

const meta = {
  title: 'Example/Image',
  component: Image,
  tags: ['autodocs'],
  argTypes: {

  },
  args: {
    src: 'https://picsum.photos/200/200',
    name: 'Image 1',
  }
} satisfies Meta<typeof Image>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {

  },
};

ImageGroup.stories.ts

import type { Meta, StoryObj } from '@storybook/react';
import { ImageGroup } from '../components/ImageGroup/ImageGroup';

const meta = {
  title: 'Example/ImageGroup',
  component: ImageGroup,
  tags: ['autodocs'],
  argTypes: {

  },
} satisfies Meta<typeof ImageGroup>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    children: [

    ],
  },
};

The story for the Image works properly:

But I want to create a story for the ImageGroup as well.

On file: App.tsx I have the following code:

import './App.css';
import { Image } from './components/Image/Image';
import { ImageGroup } from './components/ImageGroup/ImageGroup';

function App() {
  return (
    <div className="App">
      <ImageGroup>
        <Image name="Image 1" src="https://picsum.photos/200/200?nocache=1" />
        <Image name="Image 2" src="https://picsum.photos/200/200?nocache=2" />
        <Image name="Image 3" src="https://picsum.photos/200/200?nocache=3" />
      </ImageGroup>
    </div>
  );
}

export default App;

which displays something like this:

I want the story for the ImageGroup to display something similar.

Any idea on how to do this?

Thanks!