Storybook passing args to arrow function

Question

I am trying to pass args to MyComponent as below from a SB story.

export default {
  title: "Storybook",
  component: MyComponent,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
}; 
const Template = ({ args }) => {
  return (
      <MyComponent {...args} />
  );
};

export const First = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
First.args = {
  storyName: "First One",
  prop1: "One - 1",
  prop2: "Two - 2",
};

Component defined like below.

export const MyComponent = ({ prop1, prop2 }) => { 
  return (
    <span>{prop1}--{prop1}</span>
  );
};

prop1 & prop2 are are undefined.

Answer 1

const Template = ({ args }) => {
  return (
      <MyComponent {...args} />
  );
};

The above template should be like below

const Template = (args) => {
  return (
      <MyComponent {...args} />
  );
};

Storybook Args