Cannot use React Components with Resend to send emails

[EnderMo23]

I just set up resend in my Next.JS app but I stumbled upon an error: I cannot use the react parameter when sending an email. The text and the html parameters are working fine and I receive the email but for some reason it is not working with react components although I did go through the Resend docs.

Here is my API endpoint:

import { EmailTemplate } from '@/components/E-MailTemplate';
import { NextResponse } from 'next/server';
import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST() {
    try {
        const { data } = await resend.emails.send({
            from: '[email protected]',
            to: '[email protected]',
            subject: 'Test Subject',
            react: EmailTemplate({ firstName: 'User1' }),
        });

        return NextResponse.json(data);
    } catch (error) {
        return NextResponse.json({ "Error sending Email: ": error }, { status: 500 });
    }
}

And here is my Email Template:

import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
}

export function EmailTemplate({ firstName }: EmailTemplateProps) {
  return (
    <div>
      <h1>Welcome, {firstName}!</h1>
    </div>
  );
}

I always get this error:
{
"Error sending Email: ": {}
}

Thank you for your help!

[OahMada]

try out react-email