Impossible to display a modal with StoryBook 7 | Storybook | Page 1

I have a ModalButton component. My component work well on my Next.js app but in my story, when i click on the button it does not display the modal.

Here the code of my component :

"use client";

import React, {
  cloneElement,
  ComponentProps,
  FunctionComponent,
  ReactElement,
  ReactNode,
} from "react";
import useModal from "../../../hooks/useModal";
import Modal from "../Modal/Modal";

type ModalButtonProps = {
  trigger: ReactElement;
  modalProps?: Pick<
    ComponentProps<typeof Modal>,
    "className" | "header" | "leading" | "size" | "trailing" | "title"
  >;
  modalContent: ReactNode;
};

const ModalButton: FunctionComponent<ModalButtonProps> = ({
  trigger,
  modalProps,
  modalContent,
}) => {
  const modalState = useModal();

  return (
    <>
      {cloneElement(trigger, {
        onClick: (event: any) => {
          event?.preventDefault();
          modalState.open();
        },
      })}
      <Modal
        open={modalState.isOpen}
        onClose={modalState.close}
        {...modalProps}
      >
        {modalContent}
      </Modal>
    </>
  );
};

export default ModalButton;

The code of the story :

import { Meta, StoryObj } from "@storybook/react";
import Button from "../../components/elements/Button";
import ModalButton from "../../components/modules/ModalButton";

export default {
  title: "modules/ModalButton",
  component: ModalButton,
  args: {
    modalContent: <p>Modal content</p>,
  },
  argTypes: {
    trigger: { table: { disable: true } },
    modalContent: { table: { disable: true } },
    modalProps: { table: { disable: true } },
  },
} as Meta<typeof ModalButton>;

type Story = StoryObj<typeof ModalButton>;

export const ButtonTrigger: Story = {
  args: {
    trigger: <Button>Lorem ipsum</Button>,
  },
};
export const AnchorTrigger: Story = {
  args: {
    trigger: <Button as="a">Lorem ipsum</Button>,
  },
};

Impossible to display a modal with StoryBook 7

#Impossible to display a modal with StoryBook 7