On the first image you can see next.js rendered this element twice

I used tables and thought that it is because of them but then I tried to remove tables and put jut and it still renders twice so I don't know what it can be.

Next.js does not renders only that element but the first from this object

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

Maybe it has something to do with useState and my statemanagment in this code below

Component that renders twice.

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;