ReactJS de kuyruğa eklediğim divleri sırayla ekrana basamıyorum

ReactJs de yeniyim JS de de yeni sayılırım. queue ye eklediğim div objelerini sırayla ekrana basmak istiyorum. Bir div etiketi ekranda gözüktükten sonra kullanıcı buna next dediğinde sıradakini görmesini sityorum.

İlk önce boolean bir değişkenle visible tuttum. True ysa göster false gizle şeklinde yaptım ama bu sefer div etiketlerim 2 den fazla olduğunda haliyle çalışmadı.

Kodların bir kısmı;

return <UserConsumer>
            {
                value => {
                    //const {dispatch} = value;
                    return (
                        <div>


                        <Animation pose = {visible ? "visible" : "hidden"}>
                            <div className = "card col-md-12 mb-4">
                               <div className ="card-body">
                                    <form onSubmit = {this.changeVisibility}>
                                        <div className ="form-group">
                                            <Text text="Adınız ve Soyadınız" />
                                        </div>
                                        <div className = "form-group">
                                            <Input ph="Ad ve Soyad" />
                                        </div>
                                        <Button clickText = "İleri" />
                                    </form>
                                </div>
                            </div>
                        </Animation>

                        <Animation pose = {!visible ? "visible" : "hidden"}>
                        {queue.push(<div className = "card col-md-12 mb-4">
                               <div className ="card-body">
                                    <form onSubmit = {this.changeVisibility}>
                                        <div className ="form-group">
                                            <Text text="E-mail adresiniz" />
                                        </div>
                                        <div className = "form-group">
                                            <Input ph="E-mail" />
                                        </div>
                                        <Button clickText = "İleri" />
                                    </form>
                                </div>
                            </div>)
                        }
                        </Animation>

                        </div>
                    )
                }
            }
        </UserConsumer>

Yardımınızı bekliyorum. Teşekkürler.

Yukari da her div icin bir state olustur su sekilde:

this.setState(divState => ({  kontrol: !divState.kontrol}));

bu sekilde toggle boolean ile saglayabilirsin islemleri