Promise<Element> is not a valid JSX element, converting Promise<Element> to Element

I'm trying to use the Item component, but it gives this error:

(alias) const Item: (id: string) => Promise<JSX.Element>
import Item
Type '{}' is not assignable to type 'string'.ts(2322)
'Item' cannot be used as a JSX component.
  Its return type 'Promise<Element>' is not a valid JSX element.
    Type 'Promise<Element>' is missing the following properties from type 'ReactElement<any, any>': type, props, key ts(2786)

The Item component is like this:

const Item = async (id: string) => {    
    const itemData = await getItemData(id);

    return (<Button className="item">
        <ItemContent name={itemData.name} description={itemData.description} />
    </Button>);
}

The getItemData function is like this:

async function getItemData(item: string) {

    if (item === "") {
        return {
            name: "Error",
            description: "Couldn't fetch the latest items :( ..."
        }
    }

    const itemData = fetch("/api/items/getItem/", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({
            id: item
        })
    })
    .catch(err => {
        console.error(err);
        throw new Error("Failed to get item data");
    });

    const res = (await itemData).json();
    return res;

}

What can I do to convert Promise<Element> to Element, I tried .then(res => res.json()), it doesn't work, I tried typing the functions, it doesn't work either, whenever I try to use the Item component it just gives the error.

If it's important, I'm using React Next.js with Typescript