Hi everyone!

I'm attempting to use renderToStaticMarkup in a server action to send the generated HTML via email.

import { renderToStaticMarkup } from "react-dom/server";
import { sendEmail } from "@/infra/email";
import { ResetPasswordEmail } from "@/infra/email/templates";
import { zhrLog } from "@/infra/logging";
import { userRoutes } from "@/routes";

interface SendPasswordResetLink {
  email: string;
  firstName: string;
  passwordResetToken: string;
}

export const sendPasswordResetLink = async ({ email, firstName, passwordResetToken }: SendPasswordResetLink): Promise<void> => {
  const url = userRoutes.resetPassword.generateUrl(passwordResetToken);
  const subject = `Password reset`;
  const html = renderToStaticMarkup(<ResetPasswordEmail firstName={firstName} url={url} />);
  const result = await sendEmail({ html, subject, toEmail: email, toName: firstName });

  if (result === `error`) {
    zhrLog(`Error sending password reset link to ${email}`);
    throw new Error();
  }
};

However I'm getting the following error in the backend:
Error: × Expected '>', got 'firstName'

And in VSCode I get red squigly lines and when I hover it says:
'ResetPasswordEmail' refers to a value, but is being used as a type here. Did you mean 'typeof ResetPasswordEmail'?ts(2749)

The ResetPasswordEmail component doesn't have any interactivity, and its filename ends in .tsx.

Any idea how I can fix this, or some other way to send HTML emails in server actions? Thanks!