How to make tabs manageable?

Question

React

Made a tabs component. The problem is that if I use props.children instead of content and then use this component in the project, then the content does not switch. Tell me how to write a component correctly so that the content can be used from the page where the tabs are connected

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

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