NextJS `useOptimistic` vs. tRPC react-query optimistic update?

I'm using

I want to perform optimistic updates but I'm unsure which approach to use? I followed NextJS example first. The state updated correctly but jumped back to the initial one. Then I followed t3 documentation but I'm not sure if that is using pages or app router.

Does anyone have an example for using optimistic updates using t3-stack with app router and tRPC?

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#optimistic-updates
https://create.t3.gg/en/usage/trpc#optimistic-updates