Looking for solution to get a property of a React.Compomnent instance, but it seems to be unreadable.

This is my child component:

export default class TabItem extends Component {

    id: string = '';

    getId(): string {
        return this.id;
    }

    constructor(props) {
        super(props);

        this.id = Math.random().toString();
    }

    render() {

        return (
            <>
                {this.props.children}
            </>
        );
    }
};

Parent component:

export default class Tabs extends Component {

    render() {

        return (
            <div>
                <div>
                    {this.props.children && this.props.children.map ? this.props.children.map((child, i) => {
                       console.log(['AAA', child.id, child.getId()]);


                        return (
                            <div className={classname}
                                key={i}
                            >{child.caption}</div>
                        )
                    }) : ''}
                </div>
            </div>
        );
    }
};

I use both like this:

<Tabs>
                                <TabItem
                                    caption={'Booking'}
                                >
                                    AAA
                                </TabItem>

                                <TabItem
                                    caption={'Fitting'}
                                >
                                    BBB
                                </TabItem>
                            </Tabs>

But I get this error:

TypeError: child.getId is not a function

and child.id = undefined.

What am I missing?