Если к примеру есть кто живой - вапрос па реакту

Имею вопщим слайдер на саве карусель...крутица великалепна проблем неть - дастает все для сибя из дата... не магу панять как мне сделатьтак чтобы в этам слайдере чертавам кнопа падробнее аткрывалась в оверлее именна той страничкай к каторай саатветствует карта?
вот тупа код без оверлея
<OwlCarousel
responsive={state.responsive}
responsiveBaseElement='body'
navElement='div'
dots={false}
navContainer='.owl-nav-custom-works'
nav={true}
navText={[
"<i class='ion-chevron-left'></i>",
"<i class='ion-chevron-right'></i>",
]}
>
{projectData.map((item) => (
<div className="card" key={item.id}>
<div className="news-bg-wrapper relative w-full h-auto min-h-[600px] bg-center bg-no-repeat bg-cover" style={{ backgroundImage: `url(${item.image})`,}}></div>
<div className="news-item-inner relative w-full my-0 mx-auto text-center bg-[#151515]">
<div className="text">
<div className="divider-l h-[50px] md:h-[70px]"></div>
<div className="news-info">
<h3>
{item.subTitle}
</h3>
</div>
<div className="divider-l h-[50px] md:h-[70px]"></div>
<h2 className="section-header-news section-header-news-xs">
{item.title}<span className="block">{item.spanTitle}</span>
</h2>
<div className="divider-l h-[50px] md:h-[70px]"></div>
<p className="text font-arial">{item.text}</p>
<div className="divider-l h-[50px] md:h-[70px]"></div>
<div className="more-wraper-center" type="button">
<div className="more-button-bg-center more-button-bg-center-color-rev more-button-circle"></div>
<div className="more-button-txt-center more-button-txt-center-color-rev">
<Link href={item.target}>
<a><span>подробнее</span></a>
</Link>
</div>
</div>
<div className="divider-l h-[50px] md:h-[70px]"></div>
</div>
<div className="background">
<div className="tiles">
<div className="tile tile-1"></div>
<div className="tile tile-2"></div>
<div className="tile tile-3"></div>
<div className="tile tile-4"></div>

<div className="tile tile-5"></div>
<div className="tile tile-6"></div>
<div className="tile tile-7"></div>
<div className="tile tile-8"></div>

<div className="tile tile-9"></div>
<div className="tile tile-10"></div>
</div>

<div className="line line-1"></div>
<div className="line line-2"></div>
<div className="line line-3"></div>
</div>
</div>
</div>
))}
</OwlCarousel>