Im using App folder on Next v15.2.1

I dont understand why is this causing an infinite loop because NavItems is not a client side component, soo the wrapper shouldn't be good to use ? Im kinda new to Nextjs soo i appreciate any help.

I have the following files below:
//GetCategorysWrapper

import Categorys from './Categorys';
import { cache } from 'react';

const getGamesData = cache(async () => {
  try {
    const res = await fetch('https://www.myapi.com/example', {
      next: { 
        revalidate: 3600, 
      }
    });
    
    if (!res.ok) {
      console.error(`API error: ${res.status}`);
      return [];
    }
    
    const json = await res.json();
    return json;
  } catch (error) {
    console.error('Erro na requisição:', error);
    return []; 
});

export default async function CategorysWrapper() {
  const categoriesData = await getGamesData();
  
  return <Categorys categories={categoriesData} />;
}


export { getGamesData };

// NavItems

import CategorysWrapper from "./GetCategorysServerSide";
import NavItemsDesktop from "./NavItemsDesktop";

function NavItems() {
    console.log('Nav items rerendered');
    

    return (
        <div className="flex flex-col pb-2 md:py-2 min-h- w-full mx-auto justify-between items-center">
            <NavItemsDesktop />
            <div className="md:hidden w-full">
                <CategorysWrapper />
            </div>
        </div>
    );
}

export default NavItems;

//Categorys

export default function Categorys({categories}) {
  console.log(categories);
  
  return(<div></div>)
}

What could be causing the infinite loop ?

Scenarios i tested:
1 - no infinite loop ✅

export default async function CategorysWrapper() {
  const categoriesData = await getGamesData();
  
  return <Categorys categories={[]} />; // Empty
}

2 - Comenting CategorysWrapper on navItems stops the loop