fix: revert set pdp url params to using history replace

app/components/Product/Product.tsx

@@ -1,9 +1,8 @@
 import {useEffect, useMemo} from 'react';
-import {useSearchParams} from '@remix-run/react';
 import {useProduct} from '@shopify/hydrogen-react';
 
 import {COLOR_OPTION_NAME} from '~/lib/constants';
-import {useSettings} from '~/hooks';
+import {useLocale, useSettings} from '~/hooks';
 import type {SelectedVariant} from '~/lib/types';
 
 import {ProductDetails} from './ProductDetails';
@@ -16,8 +15,8 @@ export function Product({product, initialSelectedVariant}: ProductProps) {
   const {selectedVariant: providerSelectedVariant} = useProduct() as {
     selectedVariant: SelectedVariant;
   };
-  const setSearchParams = useSearchParams()[1];
   const {header, product: productSettings} = useSettings();
+  const {pathPrefix} = useLocale();
 
   const selectedVariant = useMemo(() => {
     /* workaround because selected variant from useProduct hook is momentarily
@@ -39,16 +38,16 @@ export function Product({product, initialSelectedVariant}: ProductProps) {
   useEffect(() => {
     if (product.variants.nodes.length === 1 || !selectedVariant) return;
 
-    const {search} = window.location;
+    const {origin, search} = window.location;
+
     const params = new URLSearchParams(search);
     selectedVariant.selectedOptions?.forEach(({name, value}) => {
       params.set(name, value);
     });
 
-    setSearchParams(params, {
-      preventScrollReset: true,
-      replace: true,
-    });
+    const updatedUrl = `${origin}${pathPrefix}/products/${product.handle}?${params}`;
+
+    window.history.replaceState(window.history.state, '', updatedUrl);
   }, [product.handle, selectedVariant?.id]);
 
   const stickyPromobar =