Using Sanity to house email content

[JamesSingleton]

I wasn't sure if here or the resend-node repo was the best place, so I will start here first. Is there a way to allow Sanity's Block Content to potentially be the source of the email content instead of hardcoding it.

I was trying something like

import { PortableText, PortableTextComponents } from '@portabletext/react'
import { Text, Link } from '@react-email/components'

import type { PortableTextBlock } from '@portabletext/types'

export function CustomPortableTextForEmail({
  paragraphClasses,
  value,
}: {
  paragraphClasses?: string
  value: PortableTextBlock[]
}) {
  const components: PortableTextComponents = {
    block: {
      normal: ({ children }) => {
        return <Text className={paragraphClasses}>{children}</Text>
      },
    },
    marks: {
      link: ({ children, value }) => {
        return (
          <Link
            className="ml-2 font-medium text-blue-600 no-underline"
            href={value?.href}
            rel="noreferrer noopener"
          >
            {children}
          </Link>
        )
      },
    },
  }

  return <PortableText components={components} value={value} />
}

And then in the actual email template I have

<Section>
  <CustomPortableTextForEmail
    value={defaultMessage}
    paragraphClasses='"text-base leading-6 text-black"'
  />
</Section>

However, I get this in my terminal

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

And the email doesn't send. I know @portabletext/react has a toPlainText. However, that gets rid of any structure to the block content.

I even tried bringing in the <PortableText /> into the email template itself

<Section>
  <PortableText components={components} value={defaultMessage} />
</Section>

With components looking the same

const components: PortableTextComponents = {
    block: {
      normal: ({ children }) => {
        return (
          <Text className="text-base leading-6 text-black">{children}</Text>
        )
      },
    },
  }

However, the result is still the same, I get the warning and no email is sent.