const renderTimeSlots = () => {
    const timeSlots = [];
    for (let i = parseInt(workStartsAt); i <= parseInt(workEndsAt); i++) {
      if (i !== 0) {
        timeSlots.push(
          <div className="flex flex-row cursor-pointer">
            <p key={i} className="text-slate-400 h-[150px]">{i < 10 ? "0" + i : i.toString()}:00</p>
            <div className="w-[90%] h-[1px] bg-slate-400 mt-2.5 ml-3"></div>
          </div>
        );
      }
    }

    return timeSlots;
};


const handlePosClick = (e: any) => {
    setTimeSlotItems([...timeSlotItems, { date: currentSelectedDate, div: <div onClick={handleOpen} className="w-[20%] h-[60px] bg-red-400 rounded-[1rem] absolute cursor-pointer" style={{ left: e.clientX + "px", top: (e.clientY - 20) + "px" }}></div> }])
}

<>
<div className="w-[72vw] -mr-[18vw] -mt-3 shadow-[0_3px_10px_rgb(0,0,0,0.2)] pl-5 pt-3 ml-5">
    <p className="text-black font-bold">{moment(currentSelectedDate.fullDate).subtract(1, 'day').format('ddd DD MMMM YYYY')}</p>

    <div className="flex flex-col h-[93%]" onClick={handlePosClick}>
      {renderTimeSlots()}
    </div>
</div>

{timeSlotItems.map((item: any) => {
  if (item.date == currentSelectedDate) return item.div
})}
</>

I have this code where it renders the times (I’ll give an example of 07am to 07pm. And wherever I click, I want it do add a div. When I am not scrolled down, it works properly, but as soon as I scroll even a little bit, it adds the div a lot higher than where I clicked

When I scroll I want it to add the items where I clicked