Scrolling to latest rendered component - reactjs

Question

how can I pass ref to latest rendered component in this situation so page will scroll to him after its render? The example below obviosuly doesn't work but I dont have any idea how to do it.
Edit: Added ShortenedLink component according to comments.
const ref = useRef(null);
useEffect(() => {
ref.current.scrollIntoView();
}, [linkArr]);
return(
<LinkShortenerContainer >
<LinkShortener
setLinkArr={setLinkArr}
/>
<AnimatePresence>
{linkArr.map((item) => {
return (
<ShortenedLink
ref={ref}
setLinkArr={setLinkArr}
key={item.id}
id={item.id}
long={item.long}
short={item.short}
/>
);
})}
</AnimatePresence>
</LinkShortenerContainer>
)
export default function ShortenedLink({ long, short, id, setLinkArr }) {
const [isCopied, setIsCopied] = useState(false);
const handleClick = () => {
navigator.clipboard.writeText(short);
setIsCopied(true);
};
const removeLink = () => {
setLinkArr((prev) =>
prev.filter((item) => {
return item.id !== id;
})
);
};
return (
<ShortenedLinkContainer
as={motion.div}
initial={{ x: -1500, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
exit={{ x: 1500, opacity: 0 }}
>
<LinkToShorten>{long}</LinkToShorten>
<ReadyLink>{short}</ReadyLink>
<Button
size={"medium"}
text={isCopied ? "Copied !" : "Copy !"}
onClick={() => handleClick()}
></Button>
<IconContainer>
<FontAwesomeIcon onClick={() => removeLink()} icon={faX} size={"sm"} />
</IconContainer>
</ShortenedLinkContainer>
);
}

Answer 1

I had a same requirement when writing my chat app: rolling to the latest message.
My way is to put an empty div after all messages. then all I need is to scroll to that div instead of putting ref in every newly created message.