How to custom CollectionCard

[kryushiki]

trafficstars

I'm trying to customize the card layout shown in the CollectionViewGallery, but I'm having trouble getting my custom component to apply.

notionPage.tsx

 const components = React.useMemo<Partial<NotionComponents>>(
    () => ({
      Collection: CustomCollection, // OK
      CollectionCard: CustomCollectionCard, // NG
    }),
    []
  )

CollectionCard is nested inside Collection → CollectionView → CollectionViewGallery → CollectionCard.

So, to customize the CollectionCard, do I need to patch all of the following components: Collection, CollectionView, CollectionViewGallery, and CollectionCard?

If that's the case, I tried the following setup:

CustomCollection.tsx

import { Collection } from 'react-notion-x/build/third-party/collection'
import CustomCollectionView from './CustomCollectionView'

function CustomCollection(props) {
  console.log('CustomCollection', props)
  return (
    <Collection
      {...props}
      components={{
        CollectionView: CustomCollectionView
      }}
    />
  )
}

export default CustomCollection

However, my CustomCollectionView does not seem to be reflected or used.

Could you please let me know how I should properly pass down the custom components so that my CustomCollectionCard is actually used in the gallery view?