It's throwing an error | Storybook | Page 1

import React, { FC } from 'react';
import ActionButton from '../button/action-button';
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
} from '../ui/dialog-custom';

// interface
interface AgreementAlertDialogProps {
  heading: string;
  description: string;
  cancelButtonText: string;
  confirmButtonText: string;
  isLoading: boolean;
  onClose?: () => void;
  onSuccess?: () => void;
}

export const AgreementAlertDialog: FC<AgreementAlertDialogProps> = ({
  heading,
  description,
  cancelButtonText,
  confirmButtonText,
  isLoading,
  onClose,
  onSuccess,
}) => {
  return (
    <>
      <DialogContent>
        <DialogHeader className='text-lg font-medium text-gray-700 -mb-2'>
          {heading}
        </DialogHeader>
        <div className=' text-gray-500 pb-2'>{description}</div>
        <DialogFooter className='flex items-center gap-2 -mb-2'>
          <ActionButton
            type={'button'}
            style={'outline'}
            text={cancelButtonText}
            onClick={onClose}
            isLoading={isLoading}
          />
          <ActionButton
            type={'button'}
            style={'normal'}
            text={confirmButtonText}
            onClick={onSuccess}
            isLoading={isLoading}
          />
        </DialogFooter>
      </DialogContent>
    </>
  );
};

That's my dialog

How can I resolve it??

import { AgreementAlertDialog } from '@/components/dialog/agreement-alert-dialog';
import type { Meta, StoryObj } from '@storybook/react';

const meta = {
  title: 'Components/AgreementAlert',
  component: AgreementAlertDialog,
  parameters: {
    layout: 'centered',
  },
} satisfies Meta<typeof AgreementAlertDialog>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    heading: 'Would you also like to save this agreement as a template?',
    description:
      "By saving this agreement as a template, you'll save time by providing a starting point for drafting new agreements.",
    cancelButtonText: 'No',
    confirmButtonText: 'Yes, save this as template',
    isLoading: true,
    onClose: () => {
      alert('close');
    },
    onSuccess: () => alert('success'),
  },
};

That's my story
and when I run, it;s throwing an error like
DialogPortal` must be used within `Dialog

#It's throwing an error