En la primera imagen, puede ver que next.js representó este elemento dos veces

Utilicé tablas y pensé que era por ellas, pero luego traté de quitar tablas y poner jut y todavía se muestra dos veces, así que no sé qué puede ser.

Next.js no representa solo ese elemento sino el primero de este objeto

 const Sections = { 1: Locations, 0: Departments, // here it will render this one twice 2: Managers, 3: JobTitles, };

Tal vez tenga algo que ver con useState y mi statemanagment en este código a continuación

Componente que renderiza dos veces.

 const Locations = () => { return <div>hdjsad</div>; };

 // Tab Sections import Locations from '' import Departments from '' import Managers from '' import JobTitles from '' import Icons from "../../Icons"; import TabItem from "./TabItem"; const tabs_text = ["Locations", "Departments", "Managers", "Job Titles"]; const Sections = { 0: Locations, // THIS IS THE COMPONENT WHICH RENDERS TWICE 1: Departments, 2: Managers, 3: JobTitles, }; const SettingsTab = () => { const [active, setActive] = useState<number>(0); const select = useCallback((id: number) => { return () => setActive(id); }, []); const ActiveSection = useMemo(() => Sections[active], [active]); return ( <section className={"mb-[24px]"}> <header className={"w-full flex items-center mb-[34px] pl-[24px] pr-[12px]"} > <div className={"flex space-x-[8px] !mb-0 overflow-x-scroll"}> {tabs_text.map((tab_text, i) => { return ( <div onClick={select(i)} key={i}> <TabItem active={+active === i}>{tab_text}</TabItem> </div> ); })} </div> <ImportLocationsAndFilter /> </header> <ActiveSection /> </section> ); };

APP.js

 import { AppProps } from "next/app"; import "antd/dist/antd.css"; import "../styles/global.css"; function MyApp({ Component, pageProps }: AppProps) { return <Component {...pageProps} />; } export default MyApp;