Why do I get this error when I try to use react-pdf in my next js 14.2

I’ve been having a problem with react-pdf in my next js, i’ve been following multiple tutorial and it seems like still have an error.

I get this error

⨯ Instead change the require of react-pdf.js in C:UsersTCET
ADMINDesktopnext.nextserverapp(client)page.js to a dynamic
import() which is available in all CommonJS modules.
at @react-pdf/renderer (C:UsersTCET ADMINDesktopnext.nextserverapp(client)page.js:110:18)
at webpack_require (C:UsersTCET ADMINDesktopnext.nextserverwebpack-runtime.js:33:43)
at eval (_components/CreateAppointmentPdf.tsx:7:77)
at (ssr)/./app/(client)/_components/CreateAppointmentPdf.tsx (C:UsersTCET
ADMINDesktopnext.nextserverapp(client)page.js:419:1)
at webpack_require (C:UsersTCET ADMINDesktopnext.nextserverwebpack-runtime.js:33:43)
at eval (_components/downloadbutton.tsx:10:79)
at (ssr)/./app/(client)/_components/downloadbutton.tsx (C:UsersTCET
ADMINDesktopnext.nextserverapp(client)page.js:463:1)
at webpack_require (C:UsersTCET ADMINDesktopnext.nextserverwebpack-runtime.js:33:43)
at eval (_components/create-schedule-dialog.tsx:38:74)
at (ssr)/./app/(client)/_components/create-schedule-dialog.tsx (C:UsersTCET
ADMINDesktopnext.nextserverapp(client)page.js:452:1)
at webpack_require (C:UsersTCET ADMINDesktopnext.nextserverwebpack-runtime.js:33:43)
at eval (_components/left-calendar.tsx:10:81)
at (ssr)/./app/(client)/_components/left-calendar.tsx (C:UsersTCET
ADMINDesktopnext.nextserverapp(client)page.js:496:1)
at webpack_require (C:UsersTCET ADMINDesktopnext.nextserverwebpack-runtime.js:33:43)
at eval (page.tsx:9:83)
at (ssr)/./app/(client)/page.tsx (C:UsersTCET ADMINDesktopnext.nextserverapp(client)page.js:540:1)
at Object.webpack_require [as require] (C:UsersTCET ADMINDesktopnext.nextserverwebpack-runtime.js:33:43)
at JSON.parse () digest: “2904845551”

I tried multiple tutorial, and I tried it to make it like this. I created a custom components and I just pass on different props on it.

MainComponent.tsx

   <DownloadButton
       disabledButton={!confirmAgreement}
       onClick={form.handleSubmit(onSubmit)}
       isPending={isPending}
       form={form} />
     </DialogClose>

DownloadButton.tsx

'use client'
import React from 'react'
import CreateDocumentPDF from './CreateAppointmentPdf'
import dynamic from 'next/dynamic'

const DownloadButton = ({ form, onClick, disabledButton, isPending }: any) => {
    const [isClient, setIsClient] = useState(false)

    const PDFDownloadLink = dynamic(
        () => import("@react-pdf/renderer").then((mod) => mod.PDFDownloadLink),
        {
          ssr: false,
          loading: () => <p>Loading...</p>,
        }
      );

    useEffect(() => {
        setIsClient(true)
    }, [])

    return (
        <PDFDownloadLink
            fileName='Appointment'
            document={
                <CreateDocumentPDF form={form} />
            }
        >
            <Button>
                    
            </Button>
        </PDFDownloadLink>
    )
}

export default DownloadButton

And then this my CreateAppointmendPDF.tsx. The problem here is when I use the feature coming from @react-pdf/renderer. I get the error.

import { Document, Font, Page, Text, View } from '@react-pdf/renderer'

const CreateDocumentPDF = ({
    form
}: any) => {
    return (
        <Document>

        </Document>
    )
}

export default CreateDocumentPDF