What's the best way to animate list change using framer-motion when its rendered like that? linkArr is a state. I would like other elements to go up to smoothly replace element that was removed on top of them.
<LinkShortenerContainer>
<LinkShortener scrollToLink={scrollToLink} setLinkArr={setLinkArr} />
<AnimatePresence>
{linkArr.map((item) => {
return (
<ShortenedLink
setLinkArr={setLinkArr}
key={item.id}
id={item.id}
long={item.long}
short={item.short}
/>
);
})}
{/* div to scroll to after new ShortenedLink is rendered */}
<div ref={ref}></div>
</AnimatePresence>
</LinkShortenerContainer>