如何在react-spring中使用useTransition对列表进行动画过滤

import { useTransition, animated } from 'react-spring';

const list = [
  { id: 1, text: 'Apple' },
  { id: 2, text: 'Banana' },
  { id: 3, text: 'Orange' },
  { id: 4, text: 'Grape' }
];

const filterCondition = 'a'; // 过滤条件

const transitions = useTransition(
  list.filter(item => item.text.toLowerCase().includes(filterCondition.toLowerCase())),
  item => item.id,
  {
    from: { opacity: 0, transform: 'translate3d(0,-40px,0)' },
    enter: { opacity: 1, transform: 'translate3d(0,0px,0)' },
    leave: { opacity: 0, transform: 'translate3d(0,-40px,0)' }
  }
);

return (
  <div>
    {transitions.map(({ item, props, key }) => (
      <animated.div key={key} style={props}>
        {item.text}
      </animated.div>
    ))}
  </div>
);