How to correctly type an async Server Component in Next.js

I have a component in my Next.js project that uses async code to fetch data.

const H2: FC<HTMLAttributes<HTMLHeadingElement>> = ({
  className,
  ...props
}) => {}

const H2: FC<HTMLAttributes<HTMLHeadingElement>> = ({
  className,
  ...props
}) => {}

This was the code before and the type was working.

Now I want to make this function async like so

const H2: FC<HTMLAttributes<HTMLHeadingElement>> = async ({
  className,
  ...props
}) => {

const H2: FC<HTMLAttributes<HTMLHeadingElement>> = async ({
  className,
  ...props
}) => {

Simply wrapping the FC type in a Promise<> doesn't work. I am not very well versed in complex Generics and how they work with Promises. How can I type this function correctly?

NickServ•7/29/23, 6:33 AM

Component return types should be inferred:

NickServ•7/29/23, 6:34 AM

If you get a type error when rendering this component, your type dependencies are out of date