Как правильно сделать табы управляемыми?

Question

[MRcracker]

Сделал компонент табов. Проблема заключается в том, что если я использую props.children вместо контента и потом использую данный компонент в проекте, то контент не переключается. Подскажите, как правильно написать компонент так, чтобы контент можно было использовать со страницы где табы подключены

export default function Tabs(props) {
  const [toggleState, setToggleState] = useState(1);
  const toggleTab = (index) => {
    setToggleState(index);
  };
  return (
    <div className={styles.tabsWrap}>
      <div className={styles.TabsBlock}>
        <div
          className={
            toggleState === 1
              ? classNames(styles.tabs, styles.tabsActive)
              : styles.tabs
          }
          onClick={() => toggleTab(1)}
        >
          {props.tabFirst}
        </div>

        <div
          className={
            toggleState === 2
              ? classNames(styles.tabs, styles.tabsActive)
              : styles.tabs
          }
          onClick={() => toggleTab(2)}
        >
          {props.tabSecond}
        </div>
      </div>

      <div className={styles.tabsContentWrap}>
        {
          <div
            className={
              toggleState === 1
                ? classNames(styles.tabsContent, styles.activeContent)
                : styles.tabsContent
            }
          >
            {props.children}
          </div>
        }

        {
          <div
            className={
              toggleState === 2
                ? classNames(styles.tabsContent, styles.activeContent)
                : styles.tabsContent
            }
          >
            {props.children}
          </div>
        }
      </div>
    </div>
  );
}

.TabsBlock {
  display: flex;
  margin-bottom: 20px;
}

.tabsContentWrap {
  margin-bottom: 20px;
}

.tabsContent {
  display: none;
}

.activeContent {
  display: block;
}

.TabsBlock {
  border-bottom: 1px solid red;
}

.tabs {
  color: red;
  margin-right: 20px;
  cursor: pointer;
  &:last-child {
    margin-right: 0;
  }
}

.tabsActive {
  color: $text-color;
  border-bottom: 2px solid red;
}

Answer 1

[MRcracker]

https://www.youtube.com/watch?v=DWCCkcJgvf0