Как вы используете ссылки с функцией карты и Intersection Observer?

Question

Я пытаюсь создать анимированную временную шкалу для реакции с помощью функции карты и наблюдателя пересечения, чтобы каждая часть временной шкалы загружалась последовательно.

У меня проблемы с ссылками, поскольку я считаю, что только ссылка ссылки на последний элемент на карте? Я осмотрелся вокруг и, похоже, ничего не нашел.

Вот мой код:

import dataxp from '../Data/data-xp'
import TimelineItem from './TimelineItem'

function useOnScreen(options) {
  const ref = React.createRef()
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      setVisible(entry.isIntersecting);
    }, options);

    if (ref.current) {
      observer.observe(ref.current)
    }

    return () => {
      if (ref.current) {
        observer.unobserve(ref.current)
      }
    }
  }, [ref, options])

  return [ref, visible]
}

function Timeline() { 
  const [ref, visible] = useOnScreen({rootMargin: '-500px'})

  return (
  dataxp.length > 0 &&  (
    <div className='timeline-container'>
      <div className='title-container'>
        <h1 className='xp-title'>EXPERIENCE</h1>
      </div>
        {visible ? (dataxp.map((data, i) => (
          <TimelineItem data={data} key={i}  ref={ref}/> 
          )
        )) : (
          <div style={{minHeight: '30px'}}></div>)}
      <div className='circle-container'>
        <div className='end-circle'> </div>
      </div>
    </div>
    )
  )
}


export default Timeline