I'm using the Swiper component to handle multistep signup, with these current slides + conditionally rendering depending on the way the user wants to proceed, for now, it works just fine, but when another slide is added to the end of the Swiper, the slides are orders and the rending condition gets messed, basically, slides that should only render when fillOutManualy is true, are rendering when fillOutManually is false, also not rendering in their respective order.
Here is the Swiper:
<Swiper spaceBetween={50} slidesPerView={1} onSlideChange={() => { setActiveIndex(swiperRef.activeIndex); if (fillOutManually) { if (swiperRef.activeIndex === 0) { setNext("Introduction"); setPrev(""); } if (swiperRef.activeIndex === 1) { setNext("Educational Journey"); setPrev("CV"); } if (swiperRef.activeIndex === 2) { setNext("Internship Experiences"); setPrev("Introduction"); } if (swiperRef.activeIndex === 3) { setNext("Skills & Expertise"); setPrev("Educational Journey"); } if (swiperRef.activeIndex === 4) { setNext("Language Proficiency"); setPrev("Internship Experiences"); } if (swiperRef.activeIndex === 5) { setNext("Profile Picture"); setPrev("Skills & Expertise"); } if (swiperRef.activeIndex === 6) { setNext("Interests"); setPrev("Language Proficiency"); } if (swiperRef.activeIndex === 7) { setNext("Links"); setPrev("Profile Picture"); } if (swiperRef.activeIndex === 8) { setNext("Review Information"); setPrev("Interests"); } if (swiperRef.activeIndex === 9) { setNext("Verify Email"); setPrev("Links"); } } else { if (swiperRef.activeIndex === 0) { setNext("Profile Picture"); setPrev(""); } if (swiperRef.activeIndex === 1) { setNext("Interests"); setPrev("CV"); } if (swiperRef.activeIndex === 2) { setNext("Links"); setPrev("Profile Picture"); } if (swiperRef.activeIndex === 3) { setNext("Verify Email"); setPrev("Interests"); } } if ((swiperRef.activeIndex === 10 && fillOutManually) || (swiperRef.activeIndex === 4 && !fillOutManually)) { sendEmailVerification(); setEmailSent(true); } }} onSwiper={(swiper) => { setSwiperRef(swiper); setActiveIndex(swiper.activeIndex); // if (swiper.activeIndex === 0) { // setNext("Introduction"); // setPrev(""); // } }} allowTouchMove={false}><><SwiperSlide><div><h1 className='text-4xl font-semibold text-[#333333] font-inter mt-9 ml-5'>Empower Your Professional Journey!</h1><p className='text-lg text-[#333333] font-inter mt-2 ml-5'>Take Control of Your Narrative and Showcase Your Expertise</p></div><div className='mx-5 mt-5 flex gap-5'><div className='bg-white p-3 rounded-xl w-fit'><p className='text-[#333333] font-inter font-bold'>How would you like to populate your profile?</p><div className='mt-5 space-y-2'><label><input type="file" className='hidden' onChange={handleCVUpload} /><div className={`bg-primary p-2 rounded-md flex items-center gap-2 cursor-pointer ${selectedCV ? 'bg-primary/50 text-primary' : 'text-white'}`}><PiReadCvLogoFill className='' /><p className=' font-inter'>Upload your CV</p></div></label><div className={`bg-primary p-2 rounded-md flex items-center gap-2 cursor-pointer ${fillOutManually ? 'bg-primary/50 text-primary' : 'text-white'}`} onClick={handleFillOutManually}><FaFilePen className='' /><p className='font-inter'>Fill it out manually</p></div></div></div> {selectedCV && (<div className='bg-white p-3 rounded-xl w-fit flex flex-col justify-between'><div className="flex justify-between"><p className='text-[#333333] font-inter font-bold'>Your CV</p><FaFilePdf className='text-primary text-4xl' /></div><div className='mt-2 space-y-2'><p className='text-[#333333] font-inter'>{selectedCV.name}</p></div><div className='flex justify-end'><button className='bg-[#FF5050] p-2 rounded-md text-white font-inter mt-2' onClick={() => { setSelectedCV(null) setNext(""); }}>Remove</button></div></div> )}</div></SwiperSlide></> {fillOutManually && (<><SwiperSlide><div><h1 className='text-4xl font-semibold text-[#333333] font-inter mt-9 ml-5'>Provide a Comprehensive Introduction!</h1><p className='text-lg text-[#333333] font-inter mt-2 ml-5'>Share Your Story and Highlight Your Accomplishments</p></div><div className="flex items-center gap-5 mx-5 mt-5"><div className='bg-white p-3 rounded-xl'><p className='text-[#333333] font-inter font-bold mb-3'>Contact</p><input type="number" min={0} placeholder='Phone number...' value={userInformation.phoneNumber ? userInformation.phoneNumber : ''} className='bg-gray-100 p-3 rounded-lg w-full outline-none border border-gray-300 focus:border-primary' onChange={(e) => setUserInformation({ ...userInformation, phoneNumber: e.target.value })}/></div><div className='bg-white p-3 rounded-xl w-1/3'><p className='text-[#333333] font-inter font-bold mb-3'>Title</p><input type="text" min={0} placeholder='What best describes you?... (e.g. Software Developer)' value={userInformation.title ? userInformation.title : ''} className='bg-gray-100 p-3 rounded-lg w-full outline-none border border-gray-300 focus:border-primary' onChange={(e) => setUserInformation({ ...userInformation, title: e.target.value })}/></div></div><div className='bg-white p-3 rounded-xl w-2/3 mx-5 mt-5'><p className='text-[#333333] font-inter font-bold mb-3'>Comprehensive Introduction</p><div className='w-full h-full'><label><textarea className={`bg-gray-100 w-full h-44 p-3 rounded-md border focus:outline-none ${introductionLimitError ? 'border-[#FF5050] focus:border-[#FF5050]' : 'focus:border-primary'}`} placeholder='Comprehensive introduction about yourself' value={userInformation.detailedDescription ? userInformation.detailedDescription : ''} maxLength={500} onChange={handleIntroductionChange} re></textarea></label><p className={`text-sm mt-1 text-end ${introductionLimitError ? 'text-[#FF5050]' : 'text-[#9D9D9D]'}`}>{remainingCharacters} characters remaining</p></div></div></SwiperSlide><SwiperSlide><div><h1 className='text-4xl font-semibold text-[#333333] font-inter mt-9 ml-5'>Educational Journey Overview!</h1><p className='text-lg text-[#333333] font-inter mt-2 ml-5'>Highlight Your Educational Background and Achievements</p></div><div className='bg-white p-3 w-2/4 rounded-xl flex-1 mx-5 mt-5'><p className='text-[#333333] font-inter font-bold mb-3'>Recent Educations</p><div><div className='grid grid-rows-3 grid-flow-col gap-4'> {userInformation.recentEducations?.length > 0 && userInformation.recentEducations.map((education, index) => (<div key={index} className='flex items-center justify-between gap-2'><div className='bg-gray-100 p-2 rounded-md w-full'><div className='flex items-center gap-2'><p className=' font-inter'>{education.institution}</p><p className=' font-inter text-primary text-xs'>{education.graduationYear}</p></div><p className=' font-inter text-sm'>{education.degree}</p></div><div className="bg-[#FF5050] text-white rounded-md cursor-pointer p-5 hover:bg-[#FF5050]/50 hover:text-[#FF5050]" onClick={() => handleRemoveRecentEducation(index)}><FaTrash className='' /></div></div> ))}</div><div className={`bg-primary p-2 mt-5 rounded-md flex items-center gap-2 cursor-pointer text-white`} onClick={handleShowRecentEducationModal}><FaPlus className='' /><p className=' font-inter'>Add Education</p></div></div></div></SwiperSlide><SwiperSlide><div><h1 className='text-4xl font-semibold text-[#333333] font-inter mt-9 ml-5'>Recent Internship Experiences! <span className='text-xs font-normal text-[#FF7A50]'>(Optional)</span></h1><p className='text-lg text-[#333333] font-inter mt-2 ml-5'>Showcase Your Practical Learning and Professional Development</p></div><div className='bg-white p-3 w-2/4 rounded-xl flex-1 mx-5 mt-5'><p className='text-[#333333] font-inter font-bold mb-3'>Recent Intenrships</p><div><div className='grid grid-rows-3 grid-flow-col gap-4'> {userInformation.recentInternships?.length > 0 && userInformation.recentInternships.map((internships, index) => (<div key={index} className='flex items-center justify-between gap-2'><div className='bg-gray-100 p-2 rounded-md w-full'><div className='flex items-center gap-2'><p className=' font-inter'>{internships.enterpriseName}</p><p className=' font-inter text-primary text-xs'>{internships.duration}</p></div><p className=' font-inter text-sm'>{internships.role}</p></div><div className="bg-[#FF5050] text-white rounded-md cursor-pointer p-5 hover:bg-[#FF5050]/50 hover:text-[#FF5050]" onClick={() => handleRemoveRecentInternship(index)}><FaTrash className='' /></div></div> ))}</div><div className={`bg-primary p-2 mt-5 rounded-md flex items-center gap-2 cursor-pointer text-white`} onClick={handleShowRecentInternshipModal}><FaPlus className='' /><p className=' font-inter'>Add Internship</p></div></div></div></SwiperSlide><SwiperSlide><div><h1 className='text-4xl font-semibold text-[#333333] font-inter mt-9 ml-5'>Skills and Expertise Insight!</h1><p className='text-lg text-[#333333] font-inter mt-2 ml-5'>Demonstrate Your Diverse Abilities and Specializations</p></div><div className='bg-white p-3 w-2/4 rounded-xl mx-5 mt-5'><p className='text-[#333333] font-inter font-bold mb-3'>Skills & Expertise</p><div><div className='grid grid-rows-3 grid-flow-col gap-4'> {userInformation.skills?.length > 0 && userInformation.skills.map((skill, index) => (<div key={index} className='flex items-center justify-between gap-2'><div className='bg-gray-100 p-2 rounded-md w-full'><p className=' font-inter'>{skill.skill}</p><p className=' font-inter text-primary text-xs'>{skill.proficiency}</p></div><div className="bg-[#FF5050] text-white rounded-md cursor-pointer p-5 hover:bg-[#FF5050]/50 hover:text-[#FF5050]" onClick={() => handleRemoveSkill(index)}><FaTrash className='' /></div></div> ))}</div><div className={`bg-primary p-2 mt-5 rounded-md flex items-center gap-2 cursor-pointer text-white`} onClick={handleShowSkillsModal}><FaPlus className='' /><p className=' font-inter'>Add Skills & Expertise</p></div></div></div></SwiperSlide><SwiperSlide><div><h1 className='text-4xl font-semibold text-[#333333] font-inter mt-9 ml-5'>Language Proficiency Breakdown!</h1><p className='text-lg text-[#333333] font-inter mt-2 ml-5'>Display Your Linguistic Abilities and Skills</p></div><div className='bg-white p-3 w-2/4 rounded-xl mx-5 mt-5'><p className='text-[#333333] font-inter font-bold mb-3'>Languages</p><div><div className='grid grid-rows-3 grid-flow-col gap-4'> {userInformation.languages?.length > 0 && userInformation.languages.map((language, index) => (<div key={index} className='flex items-center justify-between gap-2'><div className='bg-gray-100 p-2 rounded-md w-full'><p className=' font-inter'>{language.language}</p><p className=' font-inter text-primary text-xs'>{language.proficiency}</p></div><div className="bg-[#FF5050] text-white rounded-md cursor-pointer p-5 hover:bg-[#FF5050]/50 hover:text-[#FF5050]" onClick={() => handleRemoveLanguage(index)}><FaTrash className='' /></div></div> ))}</div><div className={`bg-primary p-2 mt-5 rounded-md flex items-center gap-2 cursor-pointer text-white`} onClick={handleShowLanguagesModal}><FaPlus className='' /><p className=' font-inter'>Add Language</p></div></div></div></SwiperSlide></> )}<><SwiperSlide><div><h1 className='text-4xl font-semibold text-[#333333] font-inter mt-9 ml-5'>Make Your Profile Stand Out!</h1><p className='text-lg text-[#333333] font-inter mt-2 ml-5 lg:w-1/2'>Your profile picture is the first thing others will see. A profile picture is needed for better identification and to personalize your account. Choose an image that represents you professionally or personally. </p></div><div className='flex gap-5 mt-9 mx-5'><div className='bg-white p-3 rounded-lg w-fit'><p className='text-[#333333] font-inter font-bold'>Upload a photo to personalize your account</p><div className='mt-5 space-y-2'><label><input type="file" className='hidden' onChange={handleProfilePictureUpload} /><div className='bg-primary p-2 rounded-md flex items-center gap-2 cursor-pointer'><MdAddPhotoAlternate className='text-white' /><p className='text-white font-inter'>Upload your photo</p></div></label></div></div> {profilePicture && (<div className='bg-white rounded-lg p-3'><p className='text-[#333333] font-inter font-bold'>Profile Picture</p><img src={URL.createObjectURL(profilePicture)} alt='' className='w-32 h-32 rounded-md object-cover mt-5' /></div> )}</div></SwiperSlide><SwiperSlide><div><h1 className='text-4xl font-semibold text-[#333333] font-inter mt-9 ml-5'>Share Your Interests!</h1><p className='text-lg text-[#333333] font-inter mt-2 ml-5 lg:w-1/2'>Understanding your interests helps us provide you with relevant information and resources that align with what you enjoy. Your input is valuable in shaping your experience on our platform.</p></div><div className='mt-9 ml-5'><Interests userInformation={userInformation} setUserInformation={setUserInformation} /></div></SwiperSlide><SwiperSlide><div><h1 className='text-4xl font-semibold text-[#333333] font-inter mt-9 ml-5'>Link Your Accounts! <span className='text-xs font-normal text-[#FF7A50]'>(Optional)</span></h1><p className='text-lg text-[#333333] font-inter mt-2 ml-5 lg:w-1/2'>Linking your profile simplifies the search process for enterprises, making it easier for them to discover and connect with you.</p><div className='mt-9 ml-5 flex gap-5'><div className='bg-white p-3 rounded-xl w-fit flex items-center gap-2'><CgWebsite className='text-[#333333] text-4xl' /><input type="text" placeholder='Portfolio website...' className='bg-gray-100 p-3 rounded-lg w-full outline-none border border-gray-300 focus:border-primary' /></div><div className='bg-white p-3 rounded-xl w-fit flex items-center gap-2'><FaGithub className='text-[#333333] text-4xl' /><input type="text" placeholder='Github profile...' className='bg-gray-100 p-3 rounded-lg w-full outline-none border border-gray-300 focus:border-primary' /></div><div className='bg-white p-3 rounded-xl w-fit flex items-center gap-2'><FaLinkedin className='text-[#333333] text-4xl' /><input type="text" placeholder='Linkedin profile...' className='bg-gray-100 p-3 rounded-lg w-full outline-none border border-gray-300 focus:border-primary' /></div></div></div></SwiperSlide></> {fillOutManually && (<><SwiperSlide><div className='mt-9 ml-5'><div className='w-1/2'><h1 className='text-4xl font-semibold text-[#333333] font-inter'>Make Sure Your Information is Correct!</h1><p className='text-lg text-[#333333] font-inter mt-2'>Ensure accuracy and completeness in your profile details. </p></div><button className='bg-primary px-9 py-2 rounded-md text-white mt-5' onClick={() => { setShowCV(true) console.log(userInformation) }}>View Information</button></div></SwiperSlide></> )}</Swiper>I tried manipulating the Swiper in every way possible, only resulting in more mess.