反应类型的子语法

我试图理解如何用非常具体的子类型构建一个反应组件,我想使用的语法是:

<Stepper>
    <Stepper.Step>
        Some text/react element child
    </Stepper.Step>
    <Stepper.Step>
        Some other text/element
    </Stepper.Step>
</Stepper>

所以我把这段代码作为一个起点,但它会抛出一个错误,即使在我不从这里输出任何东西的情况下。props: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. .

class Step extends Component {
    constructor(props: any) {
        super(props);
        this.state = {

        };
    }
    render() {
        return (
            <li>{this.props.children}</li>
        );
    }
}
class Stepper extends Component {
    static Step: typeof Step;
    constructor(props: any) {
        super(props);

        this.state = {

        };
    }
    render() {
        return (
            <ul className="stepper">
                {this.props.children}
            </ul>
        );
    }
}

请注意,我知道有些库中提供了这个功能,但我不想在我正在研究的核心代码库中添加任何新的库。