Error next 13, typescript with fetching data inside async component

HERE ERROR IMAGE

export const Filter = async (): Promise<JSX.Element> => {
  const { data: categories } = await api.get('/categories/')

  return (
    <div className='w-full h-full relative'>
      <Container className='sticky top-[6rem] max-lg:col-span-2'>
        <div className='grid grid-cols-1 gap-6 max-h-[40rem] overflow-y-scroll overflow-hidden'>

           
         There is the problem i think
          <Container className='flex items-center flex-col'>
            <SmallHeading>Kategoria</SmallHeading>
            <ul className='grid grid-cols-1 gap-4 max-h-[25rem] overflow-y-scroll overflow-hidden w-full'>
              {categories.map(c => {
                return <CategoryItem key={c.id} href={c.name} name={c.name} image={c.img} isSmall={true} />
              })}
            </ul>
          </Container>
           


        </div>
      </Container>
    </div>
  )
}

‘Filter’ cannot be used as a JSX component. Its return type ‘Promise’ is not a valid JSX element. Type ‘Promise’ is missing the following properties from type ‘ReactElement<any, any>’: type, props, key

Help i’ll try everythink

I tried what is in the code I gave above, I don’t understand why such an error appear

>Solution :

I think you can use async components only in app directory. From the next13 docs

This new data fetching model is currently being developed by the React
team. We recommend reading the support for promises React RFC which
introduces async/await in Server Components and a new use() hook for
client components. While you can try it out, it is not yet stable.
We’ll keep these docs updated to reflect the latest developments.

Warning: You can use async/await in layouts and pages, which are
Server Components. Using async/await inside other components, with
TypeScript, can cause errors from the response type from JSX. We are
working with the TypeScript team to resolve this upstream. As a
temporary workaround, you can use {/* @ts-expect-error Server
Component */} to disable type checking for the component.