doesn't work while nested, with components that have multiple subcomponents and make use of componentDidMount

[SavedByZero]

Description

I have a component that holds other components called Question. Inside, it will render one of three possible question components. This works perfectly fine if I only display a single Question like this:
return (questions[0]>

However, when I do this, it doesn't render any of them properly:
return (<ReactSwipe>{questions}</ReactSwipe>);

(unfortunately I can't show a live demo because you need private credentials and a signup account to access these questions, but
I can say that nothing on them renders except for one little avatar icon in the corner, and a stack of 16 of them show up -- making me think it's showing one sub-element of each Question, and stacking them all for some reason)

The important part of my Question component is:

componentDidMount()
    {
        //let finalQuestion = ;
        //console.log(question);
        console.log("mounting");
        console.log(JSON.stringify(this.props));
        let answers = this.props.questionObject.decisions;//
        let decisions_data = JSON.parse(this.props.questionObject.decisions_data);//
        let asset = this.props.questionObject.prompt_asset;
        let questionType = this.props.questionObject.content_type;  //0 - multiple choice, 1 - stack, 2 - short choice
        let questionGroup = this.props.questionObject.question_group;
        //let locationName="Antarctica";
        //let mostSelectedAnswer = answers[Math.floor(Math.random()*answers.length)];
        let questionComponent = {};
        // this.props.recordResponse needs to be called at some point 
        let question = this.props.questionObject;
        let prompt = question.prompt;
        if (!question.author || (question.author.length == 0))
             question.author = "Ourco";
        if (!question.organization || (question.organization.length == 0))
             question.organization = ""; 
            switch (questionType)
            {
                case "0": case "1":
                    this.setState({currentComponent:<Quizchoicequestion1 framingInfo={"Yippie Ki Yay"} Id={question.question_ID} userId={this.props.userId} key={"qc"+Math.random()} avatarClass={this.props.avatarClass} popupInfo={question.author+"\n"+question.organization} callback={this.questionAnswered} frame1="" frame2="" questionText={question.prompt} choices={answers}/>});

                    break;

                case "2": case "3":
                    this.setState({currentComponent:<Quizstackquestion1 framingInfo={"Yippie Ki Yay"} Id={question.question_ID} userId={this.props.userId} avatarClass={this.props.avatarClass} popupInfo={question.author+"\n"+question.organization} key={"qstk"+Math.random()} callback={this.questionAnswered} questionText={question.prompt} values={answers}/>});
                    
                    break;
                case "4": case "5":
                    let binary_assets = [];
                    console.log("all answers " + answers.length);
                    
                    for(var j=0; j < answers.length; j++)
                    {
                        console.log(j);
                        if (decisions_data[answers[j]].asset != "")
                        {
                           // console.log("answer " + answers[j]);
                            binary_assets.push(decisions_data[answers[j]].asset);
                        }
                    }
                    this.setState({currentComponent:<Quizbinarychoicequestion1 framingInfo={"Yippie Ki Yay"} framingInfo2={"Yippie Ki Yay"}  Id={question.question_ID} userId={this.props.userId} key={"b"+Math.random()} avatarClass={this.props.avatarClass} popupInfo={question.author+"\n"+question.organization} callback={this.questionAnswered} choiceATitle={answers[0]} choiceBTitle={answers[1]} choiceAImage={binary_assets[0]} choiceBImage={binary_assets[1]}/>});
                    
                    break;

            }
    }


    render()
    {
      // console.log("rendering with text " + this.props.questionText + " current part " + this.state.currentPart);
        return (this.state.currentComponent);
    }

Example of it broken:

Example of what happens when I remove the ReactSwipe container and only display the first element:

[SavedByZero]

Also: wrapping a div tag around either ReactSwipe or the individual components does not work -- nothing shows up. And as mentioned, I verified that without the ReactSwipe wrapper, my Question components show up and work fine individually.

EDIT: inline styling the z-index to super high DOES make the swipable components show up in order, but they're horribly mangled and all the assets are way off their positions. The components still look normal when rendered individually without the ReactSwipe container.

[SavedByZero]

Hey -- I made a simple test case you can view. I believe the bug happens when the Container tries to set the type of subcomponent to display in the componentDidMount() method:

https://codesandbox.io/s/reactswipe-forked-oelhv?file=/src/Container.js

This SHOULD be sliding 3 types of colored rectangles, but the same thing happens that happens in my own project -- nothing shows up. If I take the code out of componentDidMount() and put it in render(), you will see the rectangles, but their positioning will be all wrong.

Expected result: ReactSwipe should work at any level of nesting, and the components should operate the way they otherwise would if they weren't inside a swipe container, except for the obvious trait of not sliding into view until the time is right.