Undefined with imported component argument in multiple component storybook

I have a problem with storybook in react environment. I made a multiple component story with 2 components. One is LanguagePicker and the other is ModalDialog used by parent of LanguagePicker.

I exported DefaultModalDialog like this.

export const DefaultModalDialog = (args) => <ModalDialog {...args} />;
DefaultModalDialog.args = {
  opened: true,
  onClose: () => {},
  className: 'ly_common',
};

1. This is what I want, but it doesn't work because the DefaultModalDialog is undefined when DefaultModalDialog.args is called.

import { DefaultModalDialog } from './ModalDialog.stories';

export const WithModalDialogArgs = ({ modalDialogArgs, ...args }) => {
  return (
    <DefaultModalDialog {...modalDialogArgs} className="comp_select_layer">
      <LanguagePicker {...args} />
    </DefaultModalDialog>
  );
};
WithModalDialogArgs.args = {
  modalDialogArgs: DefaultModalDialog.args, // it doesn`t work
  sourceLocale: 'ko',
};

2. And this works fine but what I didn`t want because I should add arguments by myself.

import { DefaultModalDialog } from './ModalDialog.stories';

export const WithModalDialogArgs = ({ modalDialogArgs, ...args }) => {
  return (
    <DefaultModalDialog {...modalDialogArgs} className="comp_select_layer">
      <LanguagePicker {...args} />
    </DefaultModalDialog>
  );
};
WithModalDialogArgs.args = {
  modalDialogArgs: { // it works
    opened: true,
    onClose: () => {},
    className: 'ly_common',
  },
  sourceLocale: 'ko',
};

I checked the storybook page that the arguments called properly like this. (https://storybook.js.org/docs/react/workflows/stories-for-multiple-components#creating-a-template-component)