diff --git a/plugins/woocommerce-blocks/assets/js/base/components/shipping-rates-control/packages.js b/plugins/woocommerce-blocks/assets/js/base/components/shipping-rates-control/packages.js
index 2a4671a281b..ab945d99830 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/shipping-rates-control/packages.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/shipping-rates-control/packages.js
@@ -20,19 +20,20 @@ const Packages = ( {
 	const { selectShippingRate, selectedShippingRates } = useSelectShippingRate(
 		shippingRates
 	);
+	/* eslint-disable camelcase */
 	return (
 		<div className="wc-block-shipping-rates-control">
-			{ shippingRates.map( ( shippingRate, i ) => (
+			{ shippingRates.map( ( { package_id, ...shippingRate } ) => (
 				<Package
-					key={ shippingRate.package_id }
+					key={ package_id }
 					className={ className }
 					collapsible={ collapsible }
 					noResultsMessage={ noResultsMessage }
 					onChange={ ( newShippingRate ) => {
-						selectShippingRate( newShippingRate, i );
+						selectShippingRate( newShippingRate, package_id );
 					} }
 					renderOption={ renderOption }
-					selected={ selectedShippingRates[ i ] }
+					selected={ selectedShippingRates[ package_id ] }
 					shippingRate={ shippingRate }
 					showItems={ shippingRates.length > 1 }
 					title={
@@ -42,6 +43,7 @@ const Packages = ( {
 			) ) }
 		</div>
 	);
+	/* eslint-enable */
 };
 
 Packages.propTypes = {
diff --git a/plugins/woocommerce-blocks/assets/js/base/hooks/shipping/use-select-shipping-rate.js b/plugins/woocommerce-blocks/assets/js/base/hooks/shipping/use-select-shipping-rate.js
index 1f242b895a5..321b4beb1d3 100644
--- a/plugins/woocommerce-blocks/assets/js/base/hooks/shipping/use-select-shipping-rate.js
+++ b/plugins/woocommerce-blocks/assets/js/base/hooks/shipping/use-select-shipping-rate.js
@@ -13,21 +13,35 @@ See also: https://github.com/woocommerce/woocommerce-gutenberg-products-block/tr
  * @return {Object} This hook will return an object with two properties:
  * - selectShippingRate    A function that immediately returns the selected
  * rate and dispatches an action generator.
- * - selectedShippingRates An array of selected shipping rates, maintained
+ * - selectedShippingRates An object of selected shipping rates and package id as key, maintained
  * locally by a state and updated optimistically.
  */
 export const useSelectShippingRate = ( shippingRates ) => {
-	const initiallySelectedRates = shippingRates.map(
-		// the API responds with those keys.
-		// eslint-disable-next-line camelcase
-		( p ) => p.shipping_rates.find( ( rate ) => rate.selected )?.rate_id
-	);
+	const initiallySelectedRates = shippingRates
+		.map(
+			// the API responds with those keys.
+			/* eslint-disable camelcase */
+			( p ) => [
+				p.package_id,
+				p.shipping_rates.find( ( rate ) => rate.selected )?.rate_id,
+			]
+			/* eslint-enable */
+		)
+		// A fromEntries ponyfill, creates an object from an array of arrays.
+		.reduce( ( obj, [ key, val ] ) => {
+			obj[ key ] = val;
+			return obj;
+		}, {} );
+
 	const [ selectedShippingRates, setSelectedShipping ] = useState(
 		initiallySelectedRates
 	);
 	const { selectShippingRate } = useDispatch( storeKey );
 	const setRate = ( newShippingRate, packageId ) => {
-		setSelectedShipping( [ newShippingRate ] );
+		setSelectedShipping( {
+			...selectedShippingRates,
+			[ packageId ]: newShippingRate,
+		} );
 		selectShippingRate( newShippingRate, packageId );
 	};
 	return {