Hydrate Nextjs React Redux Thunk

Question

Problem: Error: Hydration failed because the initial UI does not match what was rendered on the server.

How can I iterate the cart without having to create another state :c

const initialState = {
  cart: Cookies.get("cart") ? JSON.parse(Cookies.get("cart")) : [],
  loading: null,
  error: null,
};

import Layout from "../../Layout";
import { connect } from "react-redux";
import { removeFromCart, clearCart } from "../../redux/actions/cart";

function PasarelaPago({ loading, removeFromCart, clearCart, cart }) {
  return (
    <Layout>
      <div className="px-2 py-10">
        <h1 className="text-2xl text-gray-600 font-bold tracking-wider text-center">
          Pasarela de pago
        </h1>
        <div className="w-full lg:w-1/2 mx-auto">
          <h3 className="text-lg font-light tracking-widest text-gray-500 px-4 my-4">
            Tu bolsa de compras
          </h3>
          <div className="flex justify-between px-3 text-xs text-gray-400 border-b pb-2">
            <div>PRODUCTOS</div>
            <div>CANTIDAD</div>
            <div>TOTAL</div>
          </div>

          <div className="flex flex-col gap-3">
            ERROR!!
            {cart && cart.map((item) => <div>{item.name}</div>)}
          </div>
        </div>
      </div>
    </Layout>
  );
}

const mapStateToProps = (state) => ({
  loading: state.Cart.loading,
  cart: state.Cart.cart,
});

export default connect(mapStateToProps, {
  removeFromCart,
  clearCart,
})(PasarelaPago);