Попутный ветер CSS и переход

Question

Я пытаюсь реализовать анимацию с помощью Tailwind CSS и Headless UI. Я пытаюсь установить его, все элементы на навигационной панели исчезают один за другим. Я думал, что смогу добиться этого, добавив задержку перехода и изменив ее для каждого элемента, но, похоже, это не работает. Сможет ли кто-нибудь мне с этим помочь?

          {navLinks.map((link, index) => (
                <Transition
                    key={link.id}
                    show={true}
                    appear={true}
                    enter='transform -translate-y-5 transition opacity-0  duration-1000 ease-in-out'
                    enterFrom='transform -translate-y-5 transition opacity-0  duration-1000 ease-in-out'
                    enterTo='opacity-100 translate-y-0 transform duration-1000 ease-in-out'
                >
                    <button
                        key={link.id}
                        style={{ transitionDelay: `${index * 500}ms` }}
                        className='navBtn'
                    >
                        <span className='text-custom-green '>{link.num}</span>
                        <p className='navP'>{link.text}</p>
                    </button>
                </Transition>
            ))}