Hello everyone, So i have a component that mean to show the categories in the system

"use client"

import { RootState } from "@/stores/store";
import { useEffect, useMemo, useState } from "react";
import { useSelector } from "react-redux";
import { selectFeaturedCategories } from "@/stores/selectors/categorySelector";

export  function CategoryCarousel() {
    let categoriesList = useSelector(selectFeaturedCategories);    
    let [activeCategory, setActiveCategory] = useState<string | null>(null);

    useEffect(() => {
        if (!categoriesList.length) return;
        setActiveCategory(categoriesList[0].value);
    }, [categoriesList.length])

    return (
        <>
            <div className="my-container overflow-hidden">
                <div className="flex items-center">
                    <h2 className="section-title">Featured Categories {activeCategory}  </h2>
                    <ul className="flex mx-[29.8] gap-[27px] justify-center h-full">
                        {   
                            categoriesList.map((category) => (
                                <li className={`text-[16px] leading-[16px] font-[600] cursor-pointer ${category.value == activeCategory ? "text-primary-green" : ""}`} key={category.label} onClick={() => setActiveCategory(category.value)}>{ category.label }</li>
                            ))
                        }
                    </ul>
                </div>
                <div className="carousel-category mb-20 flex gap-[25px] overflow-auto">
                    
                </div>
            </div>
        </>
    );
}

my main issue here that this component is rendered many time at the first load as when i added console.log i found that it repeated several times i am still learning nextjs,react so i maybe missing something