Reactjs 如何通过 id 从 useSprings 数组中删除元素

我用的是Reaction Spring的useSprings号钩子.我的这个钩子的实现接受一个变量数字作为计数，然后有一个相关的配置.

我的挂钩实现如下所示:

    const [activeTokens, setActiveTokens] = useState([]);
    const [tokenSprings, setTokenSprings] = useSprings(activeTokens.length, (index) => {
            return {
                from: { transform: `translate3d(0px, 0px, 0)`},
                to: async (next) => {
                    var rotate = randomInt(800, 7200);
                    await next({
                        transform: `translate3d(1px, 1px, 0)`,
                        config: { mass: 0.4, tension: 5, friction: 3 },
                    })

                },
            }
        }
    });

我可以添加令牌并按预期渲染弹簧.我遇到的问题是什么时候我想从DOM中删除特定的令牌.JSX看起来如下所示:

                    
tokenSprings.map((spring, index) => (
    <animated.div className="text-white text-2xl absolute cursor-pointer" key={index} style={spring}>
        <div onClick={() => handleTokenClick(index)}>
            <FontAwesomeIcon icon={faMoneyBill}></FontAwesomeIcon>
        </div>
    </animated.div >

我的handleTokenClick函数如下所示:

function handleTokenClick(tokenId) {
    setActiveTokens(activeTokens => activeTokens.filter(token => token.id !== tokenId));
}

这显然行不通，因为我没有任何可从tokenSprings数组访问的token.id.我搜索了Reaction Spring文档，但我找不到一种方法来包括我在tokenSprings数组中 for each 元素指定的id，稍后我可以在JSX中引用它.

这个是可能的吗？如果不是，如何引用我想要从DOM中删除的实际tokenSpring元素才是最好的呢？