NotionRenderer not rendering components properly

Hello there,

I'm trying to implement Search using react-notion-x as shown in the Next.js example. I've copied most of the code over and get no errors, when I try to open the Search Modal, I get the following warning:

Warning: using empty component "Modal" (you should override this in NotionRenderer.components)

Below is the code for my NotionPage.tsx, I'm importing Modal using dynamic() and adding it to the components of the NotionRenderer. I get the same warning if I directly import the Modal without using dynamic(). When I click on the Search component, it executes the search function with an empty string and returns some results but the Modal never shows up!

Does anyone know why that is and how I can fix it?

Is there a way to style and format the

component with my own HTML, I'd like to use a Chakra Ui component for it?

Thank you very much!

Notion Test Page ID

rootNotionPageId = 'a1c4c4eb2a8842e9a53a8d642b5da034'

NotionPage.tsx

import { useMemo } from 'react'
import Head from 'next/head'

import type { ExtendedRecordMap } from 'notion-types'
import { getPageTitle } from 'notion-utils'
import { NotionRenderer } from 'react-notion-x'
import Link from 'next/link'
import Image from 'next/image'
import dynamic from 'next/dynamic'
import { searchNotion } from '@/helper/notion/search-notion'

const Equation = dynamic(() =>
  import('react-notion-x/build/third-party/equation').then((m) => m.Equation),
)

const Pdf = dynamic(
  () => import('react-notion-x/build/third-party/pdf').then((m) => m.Pdf),
  {
    ssr: false,
  },
)

const Modal = dynamic(
  () => import('react-notion-x/build/third-party/modal').then((m) => m.Modal),
  {
    ssr: false,
  },
)

export const NotionPage = ({
  recordMap,
  rootPageId,
  rootDomain,
}: {
  recordMap?: ExtendedRecordMap
  rootPageId?: string
  rootDomain?: string
}) => {
  const components = useMemo(
    () => ({
      Equation,
      Pdf,
      Modal: Modal,
      nextLink: Link,
      nextImage: Image,
      // this will change all the urls to use the /docs prefix
      // TODO: add language support
      PageLink: ({ className, href, children }: { className: string, href: string, children: React.ReactElement }) => {
        return (
          <Link className={className} href={`/docs${href}`}>{children}</Link>
        )
      },
    }),
    [],
  )

  if (!recordMap) return null

  const title = getPageTitle(recordMap)

  return (
    <>
      <Head>
        <meta name="description" content="Feddersen"/>
        <title>{title}</title>
      </Head>
      <NotionRenderer
        recordMap={recordMap}
        fullPage={false}
        darkMode={false}
        rootPageId={rootPageId}
        rootDomain={rootDomain}
        searchNotion={searchNotion}
        components={components}
      />
    </>
  )
}

NotionX / react-notion-x

NotionRenderer not rendering components properly #479

Notion Test Page ID

NotionPage.tsx