I have a client component in which I show a list of items.
This is shown in a dynamic route (as you can see from the example below)

// app/lists/[listId]
"use client"

export default function ListPage({
  params,
}: {
  params: { listId: string };
}) {

  const { data, isLoading, isError } = api.item.getAll.useQuery({ listId });

// ..loading and error handling..

  return <div>
           <AddItem/> 
           {data.map((item) => <ItemCard key={item.id} item={item} />}
         </div>

}

the (client component) AddItem has the purpose of adding a new item by calling a server action when submitted:

"use client"

export const AddItem: React.FC<AddItemProps> = ({ listId }) => {
  return <form
        action={async () => {
          await createItem({
            name: "dummyName",
            description:"dummyDescription",
            listId,
          });
        }}
      >...</form>
}

Finally, the createItem server action is as follow:

"use server"

export async function createItem(props: ItemCreateInput) {
  await api.item.create.mutate(props);
  revalidatePath(`/lists/${props.listId}`);
}

By doing this (especially the revalidatePath at the end of the server action), I would expect the UI to match this change immediately, but the changes apply only after reloading the page.
I tried adding a router.refresh() at the end of the async function in the form action prop, but that doesn't change anything.

I also noticed that this bug is present only on dynamic routes: I have basically the same logic in the static route app/lists (where I allow to add a new new list instead), and the UI updates as expected there.

In the revalidatePath docs page, they mention that "with a dynamic route segment [...] The invalidation only happens when the path is next visited", but they don't provide a way to address this scenario in other ways. What should I do here?