Reactjs 每次单击按钮时，Reaction组件都会重新生成

我正在try 为React写标签，我不明白为什么只有在第二次点击它之后才将活动类应用于按钮

import { useState } from "react";

function buttonCreator() {
    const buttonStateChangers = [];
    return function SwitchTabButton({ loadTab, tabContent, tabName }) {
    console.log(`create ${tabName}`)
        const [state, toggleState] = useState("inactive");

        buttonStateChangers.push(toggleState);
        function handleClick() {
            if (state === "active") {
                return;
            }
            buttonStateChangers.forEach((changeState) => {
                changeState("inactive");
            });
            toggleState("active");
            loadTab(tabContent);
        }
        return (
            <button className={state} onClick={handleClick}>
                {tabName}
            </button>
        );
    };
}

export default function Tabs() {
  console.log("create tabs")
    const SwitchTabButton = buttonCreator();
  const [tab, loadTab] = useState(null);
    const tabsData = [
        {
            name: "Button 1",
            content: "Tab 1",
        },
        {
            name: "Button 2",
            content: "Tab 2",
        },
        {
            name: "Button 3",
            content: "Tab 3",
        },
    ];
    return (
        <>
            {tabsData.map((data, index) => {
                return (
                    <SwitchTabButton
                        key={index}
                        loadTab={loadTab}
                        tabName={data.name}
                        tabContent={data.content}
                    />
                );
            })}
            {tab}
        </>
    );
}

我注意到，当您单击一个按钮时，Tabs组件正在重建，因此按钮也在重建.我猜这是因为SwitchTabButton将loadTab作为参数，而loadTab函数与更改后的状态相关联.