Issues in Shopify App Bridge in production

[ridoybevy]

I have develop an app using Shopify Node JS Template back December. If I give you some context regarding the app functionality. It basically add customer and product item into the Shopify POS app. Basically I am utilizing the Shopify POS for purchasing something from my physical store to the customer so that they can feel same as online purchasing. It uses App Bridge to add customer information into the Shopify POS. It works fine in development environment but when I test it an Production environment like deploy the app in Heroku and a Shopify plus store it gives me below error while trying to add customer information in Shopify POS cart.

{"action":{"group":"Cart","type":"APP::CART::SET_CUSTOMER","payload":{"data":{"id":customerid},"id":"xxxx"},"version":"3.7.10","clientInterface":{"name":"@shopify/app-bridge-react","version":"3.7.10"},"source":{"host":"xxxx","apiKey":"my-key","forceRedirect":true}},"message":"Action cannot be persisted on server","type":"APP::ERROR::PERSISTENCE","id":"xxxx"}

How I add the customer to the Shopify POS and how the action perform

export const promisifiedCartAction = (cart, callback) =>
  new Promise((resolve, reject) => {
    let cartUpdatePayload = null;
    const unsubscribe = cart.subscribe(Cart.Action.UPDATE, (payload) => {
      cartUpdatePayload = payload;
      setTimeout(() => {
        return resolve(payload);
      }, 1000);
      unsubscribe();
    });
    callback();
  });

  export const addCustomerToCart = (cart, customerPayload) =>
    promisifiedCartAction(cart, () => {
      cart.dispatch(Cart.Action.SET_CUSTOMER, {
        data: customerPayload,
      });
    });

const appBridge = useAppBridge();
const [customerData, setCustomerData] = useState({
    id: "",
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    metaFieldId: "",
    tags: [],
  });
const [userId, setUserId] = useState("");
const { data, refetch } = useAppQuery({
    url: `/api/customers/single/${userId}`,
    reactQueryOptions: {
      onSuccess: () => {},
    },
  });

useEffect(() => {
    setUserId(searchParams.get("id"));
    setApp(appBridge);
  }, []);

  useEffect(() => {
    const result = data?.body?.data?.customer;
    if (data && result) {
      setCustomerData({
        id: result?.id?.split("gid://shopify/Customer/")[1] ?? "",
        firstName: result?.firstName ?? "",
        lastName: result?.lastName ?? "",
        email: result?.email ?? "",
        phone: result?.phone ?? "",
        tags: result?.tags ?? "",
      });
  }, [data]);

let cart = Cart.create(app);
let pos = Pos.create(app);
await addCustomerToCart(cart, {
 id: Number(customerData?.id),
 });

My Question is what could be the reason for Action cannot be persisted on server error? and how can i solve this issue?