I'm building a small project to try and get a grip on how the app router and server components work and I'm facing a problem I cant seem to solve. I have a simple checkbox client component which pushes query params depending on what is selected then I have a server component that consumes these query params and fetches data based on them. The client component does router.replace/router.push onChange which normally triggers the server component to change but it so happens that they are usually out of sync. For example the checkboxes and query params would indicate state1 but the server fetching would indicate state 0 and so on.
I have tried messing with the caching revalidation, forcing the page to be dynamic and so on, stack overflow hasn't proven to useful either having already tried most of the solutions I could get my hands on without much success.

Is this usecase good for server components?
Is there any pattern im missing here?

here is the code: https://paste.ofcode.org/UNEyXSZf5iec9XxUNerL9F