I have a component which will have a dynamic number of tabs:

                <Tabs labels={this.labels} tabSize={2}>
                    <General settings={this.props.settings} onChange={this.onChange} />

                    {this.props.settings.devices.map((device) => (
                        <Device key={device.address} config={device} onChange={this.onChange}></Device>
                    ))}
                </Tabs>

This leads to multiple issues:

1. if a device is added, it is shown below the current tab contents (and not hidden - probably also an issue with MaterializeCSS)
2. the tab size is fixed (here: 2), there is no way of not setting the tab width (see second in-line example on https://materializecss.com/tabs.html - if you look at the HTML, there are no col and sX classes assigned); if I have more than 12 / tabSize tabs, they are invisible.
3. mostly unrelated: it is not allowed (according to tslint) to only have one child inside the <Tabs>:

This JSX tag's 'children' prop expects type 'ReactNode[] | (ReactNode[] & string) | (ReactNode[] & number) | (ReactNode[] & false) | (ReactNode[] & true) | (ReactNode[] & ReactElement<...>) | (ReactNode[] & ReactNodeArray) | (ReactNode[] & ReactPortal)' which requires multiple children, but only a single child was provided.ts(2745)