Global PrismicRichText Defaults

Developing with Prismic
1

I was pointed in the direction of the docs for how best to define PrismicRichText defaults using the App router. I've run into TypeScript issues and I'm really hoping someone can help me get unstuck...

Fully admitting that my TypeScript knowledge is slightly above zero, but I'm lost as to how to resolve this. Even after a little ChatGPT action (don't judge me), I'm left with one error that has stumped myself and the bot:

import {
  PrismicRichText as BasePrismicRichText,
  JSXMapSerializer,
} from '@prismicio/react'
import { Heading } from './Heading'
import React from 'react'

const defaultComponents: JSXMapSerializer = {
  heading1: ({ children }) => {
    return (
      <Heading as="h1" size="4xl">
        {children}
      </Heading>
    )
  },
  heading2: ({ children }) => {
    return (
      <Heading as="h2" size="4xl">
        {children}
      </Heading>
    )
  },
}

export const PrismicRichText = ({ components, field, ...props }) => {  // this line has the errors noted below
  return (
    <BasePrismicRichText
      field={field}
      components={{ ...defaultComponents, ...components }}
      {...props}
    />
  )
}

And the error is on props for the exported constant

Binding element 'components' implicitly has an 'any' type
Binding element 'field' implicitly has an 'any' type
2

Here is the final PrismicRichText wrapper component I was able to make by inspecting the github repo for prismicio/react.

import {
  PrismicRichText as BasePrismicRichText,
  JSXMapSerializer,
  PrismicRichTextProps,
} from '@prismicio/react'
import * as prismic from '@prismicio/client'
import { Heading } from './Heading'
import React from 'react'

const defaultComponents: JSXMapSerializer = {
  heading1: ({ children }) => {
    return (
      <Heading as="h1" size="6xl">
        {children}
      </Heading>
    )
  },
  heading2: ({ children }) => {
    return (
      <Heading as="h2" size="5xl">
        {children}
      </Heading>
    )
  },
}

export const PrismicRichText = function PrismicRichText<
  LinkResolverFunction extends prismic.LinkResolverFunction<any> = prismic.LinkResolverFunction
>({ components, ...props }: PrismicRichTextProps<LinkResolverFunction>) {
  return (
    <BasePrismicRichText
      components={{ ...defaultComponents, ...components }}
      {...props}
    />
  )
}

I hope this helps anyone else who is like me and wants to use global richtextcomponents but knows very little of typescript.