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”不能用作JSX组件。其返回类型“Promise”不是有效的JSX元素。类型“Promise”缺少类型“ReactElement〈any，any〉”的以下属性：类型、 prop 、键
帮帮忙我会尽力的
我尝试了什么是在我上面给的代码，我不明白为什么这样的错误出现