Анимация удаления объекта массива с помощью React ⇐ CSS

[Anonymous]

Я работал над этим несколько часов и просто застрял. Я урезал код, над которым работаю, и опишу то, что не работает. У меня это ниже, весь импорт включен.
Я пытаюсь заставить анимацию (на данный момент затухание) воспроизводиться при нажатии на x чипа. Мне удалось создать постепенное появление, поэтому, когда я ввожу новое имя, оно исчезает по прибытии (спасибо, useEffect()!).
Теперь я заметил анимацию не воспроизводился при выходе (и я решил, что это произошло потому, что ссылка на него удалялась из массива, и это повлияло на вызов карты()). На самом деле я хочу, чтобы объект анимировался, а затем был удален из массива.
Когда я пытаюсь использовать setTimeout для ожидания завершения анимации, он начинает применять анимацию соседних элементов массива.
Я знаю, почему это происходит, но я просто не знаю, как перенести свой код в парадигму реагирования и отказаться от моего мышления стека/обратного вызова. и настроить реакцию на то, что я прошу. Могу ли я получить небольшую помощь, пожалуйста?
Спасибо
Крис
import TextField from '@mui/material/TextField';
import { useRef, useState } from 'react';
import Container from '@mui/material/Container';
import Paper from '@mui/material/Paper';
import Chip from '@mui/material/Chip';
import { styled } from '@mui/material/styles';
import { useEffect } from 'react';
import {Transition} from 'react-transition-group';

const startList = [
{name:"Ethan Anderson"},{name:"Olivia Brooks"},{name:"Mason Carter"},{name:"Ava Davis"}
];

function Student({student, hDelete}) {
const nodeRef = useRef(null);
const [inProp, setIn] = useState(false);
useEffect(() => {
setIn(true);
}, [] );
const handleDelete=() => {
setIn(false);
setTimeout(() => hDelete(student),320)
}
const duration = 300;

const defaultStyle = {
transition: `opacity ${duration}ms ease-in-out`,
opacity: 0,
}

const transitionStyles = {
entering: { opacity: 1 },
entered: { opacity: 1 },
exiting: { opacity: 0 },
exited: { opacity: 0 },
};

return (

{state => (



)}

)
}

const ListItem = styled('li')(({ theme }) => ({
margin: theme.spacing(0.5),
}));

export default function CreateStudentForm() {
const nameRef = useRef(null);
const [people, setPeople] = useState([...startList]);
const handleKeyDown = (event, nextRef) => {
if (event.key === 'Enter') {
event.preventDefault();
console.log(nextRef.current.id);
if (nextRef.current.id !== "firstName") {
nextRef.current.focus();
} else {
let myObj = {
name: nameRef.current.value,
};
nameRef.current.value = '';
let newPeople = JSON.parse(JSON.stringify(people));
newPeople.push(myObj);
setPeople(newPeople);
console.log(newPeople);
nameRef.current.focus();
}
}
};
const handleDelete = (person) => {
let newPeople = JSON.parse(JSON.stringify(people));
let idx = people.findIndex((e) => e === person);
newPeople.splice(idx,1);
setPeople(newPeople);
};

return (

handleKeyDown(e, nameRef)}
/>

{people.map((data, i) => (

)
)}



);
}



Подробнее здесь: https://stackoverflow.com/questions/781 ... with-react