Im trying to map an array oj objects in a simple way

const Folders: FC = () => {
  return (
    <section className="body-center shadow-md rounded-sm flex py-4 gap-[14px] flex-wrap my-5 relative z-[1] bg-gradien-catalog">
    <div>
       {itemCatalog.map((item)=>{
        <SmallFolder name={item.name}/>
      })}
    </div>
     
 
    </section>
  );
};

export default Folders

But i got error, i have no idea what’s the problem

Type 'void[]' is not assignable to type 'ReactNode'.
  Type 'void[]' is not assignable to type 'ReactFragment'.
    The types returned by '[Symbol.iterator]().next(...)' are incompatible between these types.
      Type 'IteratorResult<void, any>' is not assignable to type 'IteratorResult<ReactNode, any>'.
        Type 'IteratorYieldResult<void>' is not assignable to type 'IteratorResult<ReactNode, any>'.
          Type 'IteratorYieldResult<void>' is not assignable to type 'IteratorYieldResult<ReactNode>'.
            Type 'void' is not assignable to type 'ReactNode'.ts(2322)
index.d.ts(1376, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'

This is my component for mapping

interface iFolder{
  name: string
}

const SmallFolder: FC<iFolder> = ({name}) => {
  return (
    <Link
      href="/catalog"
      className="folder-container-style group grow-0 shrink flex-[278px]"
      style={{
        backgroundImage: `url("https://img.freepik.com/free-photo/flat-lay-health-still-life-arrangement-with-copy-space_23-2148854064.jpg?w=2000")`,
      }}
    >
      <p className="folder-title">{name}</p>
  
      <figcaption
        className="absolute left-0 bottom-0 flex items-end justify-center pb-5 bg-[#16406a6b] h-[40%] w-full translate-y-full
                             group-hover:translate-y-0 transition-transform"
      ></figcaption>
    </Link>
  );
};

export default SmallFolder;

I tryed add react fragment besides div

   <>
       {itemCatalog.map((item)=>{
        <SmallFolder name={item.name}/>
      })}
    </>

And error is gone, but on the page nothing is changed.

This is my data

import { TypesItem } from "@/Types/common-types";

export const itemCatalog: TypesItem[] = [
  {
    name: "Ортопедия",
    link: "orthopedics",
  },
  {
    name: "Аппликаторы и массажные коврики",
    link: "matsAndAplicators ",
  },
  {
    name: "Расспродажа",
    link: "sales ",
  },
];

I dont know whats the problem, when im trying use component directly without maping it, it works well.
Any guess whats the problem is?**

>Solution :

You’re returning an array<void> instead of an array<FC<iFolder>>. You can either add return:

{itemCatalog.map((item)=> {
  return <SmallFolder name={item.name} />
})}

or remove the curly braces {...}:

{itemCatalog.map((item)=> (<SmallFolder name={item.name} />)}