How do I use Rehype React?

Question

I am trying to convert some html to react components with rehype-react, I'm first just testing what I can do but changing a p tag to my own custom component that will turn it red however it doesn't seem to be working despite my following of the docs.

Below is the code I'm trying to run based off the documentation but the console log doesn't output the updated p tag. I have tried to find any examples I can online using this package but there doesn't seem to be any that I can find.

Is it a dead package? What I am doing wrong?

unified()
      .use(rehypeParse, {fragment: true})
      .use(rehypeReact, {createElement, components: {
        p: MyParagraph
      }, passNode: true})
      .process(text)
      .then((file) => {
        console.log(file.toString())
      })

function MyParagraph() {
  return (
    <p className='text-red-700'>
      It's working
    </p>
  )
}

Versions

"react": "18.2.0",
"react-dom": "18.2.0",
"rehype-parse": "8.0.4",
"rehype-react": "7.1.2",
"unified": "10.1.2"