Vue calendar switches back to current month when connected to Laravel controller in InertiaJS

In a Laravel Jetstream app (using VueJS and Laravel), I have a simple month calendar page (using this example from CSS Tricks) that works great. I have it working great, and it switches months just fine.

It's wired to a Laravel controller that does what it should;

    public function calendar()
    {
         $now = Carbon::now();
         $currYear = $now->year;
         $currMonth = $now->month;

         $newMonth = request('newMonth');
         $newYear = request('newYear');

         $queryYear = $newYear ?: $currYear;
         $queryMonth = $newMonth ?: $currMonth;

         $thisMonth = Shift::where(DB::raw('MONTH(date)'), $queryMonth)
             ->where(DB::raw('YEAR(date)'), $queryYear)
             ->with('user', 'station')->get();

        return Inertia::render('Shifts/CalendarMonth', [
           'shifts' => $thisMonth
        ]);
    }

When the month is changed, it emits an event (see the methods in the CalendarDateSelector component in the linked sandbox that I pick up in CalendarHome.vue

<CalendarDateSelector
    :current-date="today"
    :selected-date="selectedDate"
    @dateSelected="selectDate"
/>

...
<script>
    data() {
        return {
            selectedDate: dayjs()
        };
    },
    methods: {
        selectDate(newSelectedDate) {
            this.selectedDate = newSelectedDate;

            const newMonth = dayjs(this.selectedDate).month() + 1;
            const newYear = dayjs(this.selectedDate).year();

            this.$inertia.visit('calendar', {
                data: {
                    newMonth: newMonth,
                    newYear: newYear
                }
            });
        }
    }
</script>

And here is the <template> portion of the above referenced <CalendarDateSelector> component:

<template>
    <div class="flex text-gray-800 select-none cursor-pointer">
        <span class="mr-5" @click.prevent="selectPrevious">&lt;</span>
        <span @click="selectCurrent">Today</span>
        <span  class="ml-5" @click.prevent="selectNext">&gt;</span>
    </div>
</template>

Since I just need to get the data, I'm using $inertia.visit, and the controller does what it should and returns the correct records.

The problem is that the calendar changes to the correct month initially, but then comes right back to the current month. For instance, if the current month is September, and I click the arrow to go to August, initially the displayed date changes to August, and then bounces right back to the September (the same happens if I try to go to the next month). When I look in the Vue dev tools, the 'shifts' prop contain the expected records for August.

Without the call to $inertia.visit(), the calendar works fine; it's only when I add the call to the Laravel endpoint in the selectDate method that I run into problems, so I'm sure the problem isn't in the Vue code. What could be causing this to happen, especially when the controller is returning the correct records?

UPDATE: After doing some step-through debugging, it appears that my selectedDate value is being re-initialized because the page is being reloaded, even when I pass preserveState: true. Is it possible that the issue is that I'm not using the <inertia-link> for my calendar navigation links?

UPDATE 2: I checked the network tab for my Inertia request, and the X-Inertia header is being sent with a true value, so the page should not be reloaded.