React.js continuous scroll

Question

I have a component (for a visual view):

The current way I render this is like so:

const today = new Date()
const minimumDate = new Date(new Date().setDate(today.getDate() - 14))
const maximumDate = new Date(new Date().setDate(today.getDate() + 14))

const currentDate = minimumDate;
const dateRange = [];

while(currentDate <= maximumDate){
    const newDate = new Date(currentDate); newDate.setHours(0,0,0,0)
    dateRange.push(newDate)
    currentDate.setDate(currentDate.getDate() + 1)
}
const [itemDays, setItemDays] = useState(dateRange)

itemDays.map((date, i) => <CalendarDay key ={i} workout={{}} date={date}/>)

What i want is to render a set amount of days on the calendar, having the entire calendar would cause massive performace hits. The above code does this for +-14 days and the current day. What I need is to convert the scoll bar length into some for of index which corresponds to the dates in itemDays so that when it gets below or above a certain index I can then load the next or previous day continuously.

The trouble is, every method ive tried falls flat. Ive tried these methods which are not accurat enough:

1. Getting the centre element and try to determine where we are in the array
2. Using the scroll position and the itemDays length to generate an index (The math never checks out, could be to do with the way scrollLeft works)

Each method was either too far from being a feasible solution or would require working with a bunch of edge cases. I would also like to try to snap the scroll to the centre element which I cant do without getting some form on index like the above mentioned.