Creating tab component in React and handling click events for child components

Question

New to React and trying to build a tabular component. I know I'm reinventing the wheel but I'm trying to take this as a learning experience.

Here is how I intend to use the component:

<Tabs>
    <Tabs.MenuItems>
        <Tabs.MenuItem>Tab item 1</Tabs.MenuItem>
        <Tabs.MenuItem>Tab item 2</Tabs.MenuItem>
        <Tabs.MenuItem>Tab item 3</Tabs.MenuItem>
        <Tabs.MenuItem>Tab item 4</Tabs.MenuItem>
    </Tabs.MenuItems>
    <Tabs.Panes>
        <Tabs.Pane><div>placeholder></div></Tabs.Pane>
        <Tabs.Pane><div>placeholder></div></Tabs.Pane>
        <Tabs.Pane><div>placeholder></div></Tabs.Pane>
        <Tabs.Pane><div>placeholder></div></Tabs.Pane>
    </Tabs.Panes>
</Tabs>

My current implementation works in displaying the items properly. But the one challenge I am facing is being able to handle the onClick event for the Tabs.MenuItem. I understand that I should not be handling the onClick in the Tabs.MenuItem child component, and rather should be handled in the upmost parent Tabs component.

I tried using forwardedRef but that posed some limitations in accessing the props.children. Even if I managed to get it working syntactically, I am not even sure how the Tabs component is suppose to access that ref.

The idea here is that depending on what Tabs.MenuItem is in an active state, it will correspond to the same child Tabs.Pane component index to render that pane.

import React, { forwardRef, useState } from "react";

const Tabs = (props, { activePane }) => {

    return (
        props.children
    );
}

const MenuItems = (props) => {

    React.Children.forEach(props.children, child => {
        console.log(child);
    })

    return (
        <div className="ui secondary menu" style={props.style}>
            {props.children}
        </div>
    )
}

const MenuItem = (props) => {

    const [isActive, setActive] = useState(false);

    return (
        // eslint-disable-next-line jsx-a11y/anchor-is-valid
        <a className={isActive ? "item active" : "item"} onClick={() => setActive(!isActive)}>{props.children}</a>
    )
}

// const MenuItem = forwardRef((props, ref) => (
//     // eslint-disable-next-line jsx-a11y/anchor-is-valid
//     <a ref={ref} className="item">{props.children}</a> // error accessing props.children
// ))

const Panes = (props) => {

    return (
        props.children
    )
}

const Pane = (props) => {

    return (
        props.children
    )
}

Tabs.MenuItems = MenuItems;
Tabs.MenuItem = MenuItem;
Tabs.Panes = Panes;
Tabs.Pane = Pane;

export default Tabs;

I am not looking for someone to complete the entire tabular functionality, just an example of how I can forward the children references to the topmost parent so that I can handle click events properly.