Responsive e-commerce website with Next.js 13 App router

Having some hydration issues on my checkout page when I have items in my cart. In src/app/components/checkout/Cart.tsx, I can fix this by making my cartItems state and setting the state to { ...localstage } in a useEffect, but this doesn't allow me to update my cart in real time without force refreshing, since router.resfresh() doesn't seem to help. Haven't put much time thinking about this but if anybody has any quick feedback, feel free to drop some.

Any other feedback much appreciated! Also more specifically Next.js 13 with app router best practices.