Toggling between Upcoming, Recurring, Past, Cancelled doesn't update the bookings initially

Found a bug? Please fill out the sections below. 👍

Issue Summary

A summary of the issue. This needs to be a clear detailed-rich summary.

Have one upcoming booking. Upon loading the Bookings section, I was expecting to see different bookings for Upcoming, Recurring, Past, Cancelled. Toggling between the different options don't do anything - only the upcoming appointment would be displayed always. Then, when I do a full refresh (command+shift+R) on a selected tab (e.g. /bookings/cancelled), the specific tab loads right data.

Steps to Reproduce

Loaded the bookings as a signed-in user (bookings is the default tap anyway)
By default, the selected tap is Upcoming. There is one upcoming booking.
Tap Recurring, Past, Or Cancelled. The booking doesn't change. It's always the Upcoming.
Go to any tab other than Upcoming. For example cancelled (/bookings/cancelled). Do a full-refresh and the right data displays for the Cancelled. But same behavior happens to other tabs (Data stays the same showing cancelled bookings only)

Any other relevant information. For example, why do you consider this a bug and what did you expect to happen instead?

Technical details

Browser version, screen recording, console logs, network requests: You can make a recording with Bird Eats Bug: Chrome.
Node.js version: v.14.18.1
Anything else that you think could be an issue

calcom / cal.com