Dynamically add children at the beginning

I'm trying to implement a Calendar (such as Google Calendar) and I'm having trouble with the swipe left feature.

Since I don't want to load all the existing previous months since 1900, I simply want to add/load them dynamically. Let's say I start with three months and set my initial index to be in the middle. The swiper will look like this:
[ ] [ x ] [ ]

When I swipe to right, I need to add a month to my content, so I simply push a new month and the index moves by one, resulting in:
[ ] [ ] [ x ] [ ]

The problem is when I swipe left. The index of the swiper will naturally move by one to the left, but I also need to add one new month at the beginning. If I use the event onMomentumScrollEnd to handle my logic, the index has already changed when I'm adding a new month at the beginning, which result in a bug. The index does not seem to be synced with its children.

I'm a bit loss on how I could implement this.

Start by reproducing the calendar scenario with three months, a middle initial index, and dynamic prepending during onMomentumScrollEnd. Trace how the swiper updates its index and children when a month is added at the beginning; done means swiping in either direction keeps the selected month and index synchronized.