Storybook 다른 스토리들 칠드런으로 사용하기 에러 'bound Template(은)는 컴포넌트로 사용할 수 없습니다.'

React
1

안녕하세요,

아래 스토리북 공식문서 Using children as an arg 예제에 다른 스토리를 칠드런으로 받아서 쓸 수 있는 부분이 있습니다.

예제 코드:

// List.stories.ts | List.stories.tsx

import React from 'react';

import { List, ListProps } from './List';

//👇 Instead of importing ListItem, we import the stories
import { Unchecked } from './ListItem.stories';

const Template: Story<ListProps> = (args) => <List {...args} />;

export const OneItem = Template.bind({});
OneItem.args = {
  children: <Unchecked {...Unchecked.args} />,
};

위의 예시와 거의 동일하게 스토리북을 작성하려는 제 코드입니다.

// checkFormField.stories.tsx

import { Meta, Story } from '@storybook/react';
import CheckFormField from '@components/old/signup/organisms/checkFormField/index';
import { CheckboxProps } from '@components/old/signup/molecules/checkbox/interfaces';

//👇 Instead of importing ListItem, we import the stories
import {DefaultCheckbox} from '@components/old/signup/molecules/checkbox/checkbox.stories';

export default {
  title: 'checkFormField',
  component: CheckFormField,
} as Meta;

const Template: Story = (args) => <CheckFormField {...args}/>

export const OneItem = Template.bind({})
OneItem.args = {
  children: [<DefaultCheckbox {...DefaultCheckbox.args as CheckboxProps}/>]
}

// checkbox.stories.tsx

import { Meta, Story } from '@storybook/react';
import Checkbox from '@components/old/signup/molecules/checkbox/index';
import { CheckboxProps } from '@components/old/signup/molecules/checkbox/interfaces';

export default {
  title: 'checkbox',
  component: Checkbox,
} as Meta;

const Template: Story<CheckboxProps> = (args) => <Checkbox {...args} />;

export const DefaultCheckbox = Template.bind({});

DefaultCheckbox.args = {
  id: 'test',
  labelText: 'Default Checkbox',
  tabIndex: 0,
  checked: false,
  isDiners: false,
};

스토리북에는 아래처럼 에러가 나옵니다.

bound Template은(는) 컴포넌트로 사용할 수 없습니다.
Error: bound Template은(는) 컴포넌트로 사용할 수 없습니다.
    at http://localhost:6006/main.iframe.bundle.js:8043:15
    at http://localhost:6006/vendors~main.iframe.bundle.js:118941:17
    at http://localhost:6006/vendors~main.iframe.bundle.js:118904:17
    at mapIntoArray (http://localhost:6006/vendors~main.iframe.bundle.js:118801:23)
    at mapIntoArray (http://localhost:6006/vendors~main.iframe.bundle.js:118841:23)
    at mapChildren (http://localhost:6006/vendors~main.iframe.bundle.js:118903:3)
    at Object.forEachChildren [as forEach] (http://localhost:6006/vendors~main.iframe.bundle.js:118940:3)
    at http://localhost:6006/main.iframe.bundle.js:8037:52
    at invokePassiveEffectCreate (http://localhost:6006/vendors~main.iframe.bundle.js:112386:20)
    at HTMLUnknownElement.callCallback (http://localhost:6006/vendors~main.iframe.bundle.js:92849:14)

공식문서에서는 아래 두 경우 에러가 발생할 수 있다고 하는데 사용 중인 emotion.js가 두번째에 해당하는지까지는 아직 확인해보지 못했습니다.

    Avoid using empty values
    Use caution with components that include third party libraries
    
    As they could lead into errors with your Storybook.

혹시 예시와 같이 칠드런에 다른 스토리북을 사용해서 스토리북을 작성해보신 분 계신가요?

아래 링크는 스택오버플로우에도 올린 문의글입니다.