How to handle transition based on dynamic state?

[hichemfantar]

using the code below, when the quest rewards array is empty, the fade out transition starts but the array is empty which causes the ul element to disappear instantly before the transition ends.

is there a way to keep the old state when show changes to false?

					<Transition show={!!quest.rewards?.length} appear={true}>
						<div>
							<h1 className="mb-3 text-xl">Quest Chain Rewards</h1>
							<ul className="flex flex-wrap gap-2" ref={questRewardsParent}>
								{quest.rewards?.map((e) => (
									<li key={e.title}>
										<QuestReward e={e} />
									</li>
								))}
							</ul>
						</div>
					</Transition>