I made switchable tabs on React. And I noticed that switching between them causes rendering of all the list items, not just two, how can I fix this?
Is it possible to solve this problem without using the store?

interface ITab {
    click: () => void;
    isActive: boolean;
    children: ReactNode;
}

const Tab: FC<ITab> = ({ click, isActive, children }) => {
    console.log('tab', children);
    return (
        <div onClick={click} className={classNames(styles.tab, { [styles.tabActive]: isActive })}>
            {children}
        </div>
    );
};

const Tabs = () => {
    const tabs = ['ONE', 'TWO', 'THREE', 'FOUR', 'FIVE'];
    const [activeTab, setActiveTab] = useState(0);
    const getIsActive = (index: number) => activeTab === index;
    return (
        <div className={styles.tabs}>
            {tabs.map((tab, index) => (
                <Tab key={tab} isActive={getIsActive(index)} click={() => setActiveTab(index)}>
                    {tab}
                </Tab>
            ))}
        </div>
    );
};