Каскадная анимация Motion React ⇐ Javascript

[Anonymous]

Я пытаюсь создать раскрывающийся список-гамбургер с анимацией для каждого пункта меню. К сожалению, у меня проблема с анимацией выхода.
Я не знаю, как мне это реализовать, но происходит следующее: мой основной навигационный компонент - Navbar2 - имеет несколько дочерних элементов класса MenuOption. Я устанавливаю свойство MenuOpened со значением true/false в зависимости от того, открыл ли пользователь меню-гамбургер.
Когда пользователь открывает раскрывающийся список, анимация MenuOption работает хорошо (открытый вариант).
Теперь проблема в том, что пользователь закрывает его - я предполагаю, что происходит повторная визуализация компонента MenuOption, полностью исключающая анимацию выхода (закрытый вариант). вариант).
Как заставить компоненты MenuOption запускать анимацию выхода без повторной визуализации этих компонентов?
Вот код:
const Navbar2 = () => {
const [menuVisible, setMenuVisible] = useState(false);

const variantsMenuDropdown = {
closed: {
height: ["150px", "150px", "0px"],
},
open: {
height: ["0px", "150px"],
},
};

return (


onClick={() => {
setMenuVisible(!menuVisible);
}}
>






setMenuVisible(!menuVisible)}>




setMenuVisible(!menuVisible)}>




setMenuVisible(!menuVisible)}>





);
};

export default Navbar2;

// MenuOption file
import { useState } from "react";
import { motion } from "motion/react";
import { Link } from "react-router-dom";

const MenuOption = ({ linkName, menuOpened, delayAnimation }) => {
const [hovered, setHovered] = useState(false);

const variantsText = {
closed: {
opacity: 0,
x: [-3],
},
open: {
x: [-3, -3, 5],
opacity: 1
}
}

return (
setHovered(true)} onHoverEnd={() => setHovered(false)}>


{linkName}





)
}

export default MenuOption;



Подробнее здесь: https://stackoverflow.com/questions/797 ... -animation