Conditional step animation issue

[Paxatax]

I'm having an (exit) animation issue when making conditional steps.

Parent

   const ParentComponent = () => {
    const  [ formData, setFormData ]  = useState(null);

    function handleFormUpdate(data) {
        setFormData(prevState => {
            return {
                ...prevState,
                ...data
            }
        });
    }

    return (
        <>
            <StepWizard>
                <Form1 onFormSubmit={handleFormUpdate} />
                {formData?.conditional && <ConditionalForm onFormSubmit={handleFormUpdate} />}
                <Form2 onFormSubmit={handleFormUpdate}/>
                <Form3 onFormSubmit={handleFormUpdate}/>
            </StepWizard>
        </>
    )
}

Child Step

function Form1({nextStep, previousStep, onFormSubmit, currentStep}) {
    const {handleSubmit, register} = useForm(); // react-hook-form

    const onSubmit = (value) => {
        onFormSubmit(value);
    }

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <div>
                <div>Form 1</div>
                <input type={'text'}
                        label={'Input 1'}
                        id={'input1'}
                        name={'input1'}
                        ref={register}/>
                <input type={'text'}
                        label={'Input 2'}
                        id={'input2'}
                        name={'input2'}
                        ref={register}/>
                <input type="checkbox"
                    ref={register}
                    name={'conditional'}/>
            </div>
                <button onClick={previousStep}>back</button>
                <button onClick={nextStep}>next</button>
                <button type={'submit'}>Submit</button>
          </form>
    );
}

As is, when you check the conditional checkbox and submit, the parent's state is updated, component is re-rendered and the conditional component is added/removed, and the exitRight animation fires off even when you're on Form 1 (and not stepping). This looks pretty janky.

If I add a custom transition (see below) to StepWizard, with exitRight set to null, then it removes the issue, but you won't have a "back" animation anymore. Better, but not great.

let custom = {
        enterRight: `${transitions.animated} ${transitions.enterRight}`,
        enterLeft: `${transitions.animated} ${transitions.enterLeft}`,
        exitRight: `null`,
        exitLeft: `${transitions.animated} ${transitions.exitLeft}`,
        intro: `${transitions.animated} ${transitions.intro}`,
}

My questions are.. 1). Is there a better way to conditionally render a step? 2). Would this other way fix the animation issue described above? 3). If my above code is sound, then what would be the best way to fix the conditional 'ghost animation', while retaining exit animations when you actually want them?

Thank you very much for your time.

[nicoandresr]

Any update here, @Paxatax let me know how you faced this issue, of if you found a better approach.