Storybook 7 pass props between component

Question

I'm looking for a solution for my story. I've trying to pass some props from a mock component to a story.

Some props can be define outside the component but register and error should be pass by the MockForm.

edit 25/05 I tried this new version but all the props I put in my story are not sent.

<input type="text" class="form_atom_default_form_atoms__ghWWl p-3 text-base" aria-invalid="false">

I don't have the name the id ...

type FormData = { itemName: string };

const meta: Meta<typeof FormInput<FormData>> = {
  title: "composite/form/molecules/form-input",
  component: FormInput,
};

export default meta;

type Story = StoryObj<typeof meta>;

export const preview: Preview = {
  decorators: [(Story) => <MockForm Story={Story}></MockForm>],
};

function MockForm({ Story }: { Story: any }) {
  const validationFormSchema: ZodType<FormData> = z.object({
    itemName: z.string().min(2).max(30),
  });

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormData>({
    resolver: zodResolver(validationFormSchema),
  });
  return (
    <form action="">
      <Story
        id="inputTest"
        register={register}
        rules={{ required: "You must enter your first name." }}
        errors={errors}
        name="itemName"
        labelText="testLabel"
      />
    </form>
  );
}

Therewithal

Instead of instantiating the Story in the Preview line, what if you just pass in its definition and instantiate it in the MockForm? Then you can add props to it. – Hornpipe