svelte transition:slide is jumpy when component switch with different height happen

i have a two forms, one for sendOTP and the other one for verifyOTP and the verify otp one is taller than the send otp. the height transition for my container is jumpy on getting back from second form to first one.

i've used transition:slide to smoothly change the height, but when i'm going back from second form to first one the slide goes to the height of verify otp form(the taller one) and jump to the height of first form. i've used fly transition as well but same issue persisted, at first i wanted a transition from right to left between forms with fly transition x: -300, x: 300 but not working on height.

this is my code:

<div class="flex overflow-hidden" transition:slide={{ duration: 500, easing: circInOut }}>                        {#if !$showOTPForm}<div                                class="min-w-full"                                out:slide={{ duration: 500, easing: circInOut }}                                in:slide={{ duration: 500, delay: 500, easing: circInOut }}><SendOtpForm on:success={handleLoginSuccess} /></div>                        {:else if $showOTPForm}<div                                class="min-w-full"                                in:slide={{ duration: 500, delay: 500, easing: circInOut }}                                out:slide={{ duration: 500, easing: circInOut }}><VerifyOtpForm {phoneNumber} on:back={handleBackToSendOtp} /></div>                        {/if}</div>