refactor(FE): Use filter to remove products and deliveries

src/components/pages/inventory/movement/form/MovementForm.tsx

@@ -471,14 +471,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
   const removeProduct = useCallback(
     (i: number) => {
-      const updatedProducts =
-        formik.values.products?.reduce((acc: ProductSchema[], item, index) => {
-          if (index !== i) {
-            acc.push(item);
-          }
-          return acc;
-        }, []) ?? [];
-
+      const updatedProducts = formik.values.products?.filter(
+        (_, idx) => idx !== i
+      );
       formik.setFieldValue('products', updatedProducts);
 
       if (productQtyErrorShown) {
@@ -486,7 +481,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         setProductQtyErrorShown(false);
       }
     },
-    [productQtyErrorShown]
+    [formik.values.products, productQtyErrorShown]
   );
 
   const bulkRemoveProduct = useCallback(() => {
@@ -563,25 +558,19 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
   const removeDelivery = useCallback(
     (i: number) => {
-      const updatedDeliveries =
-        formik.values.deliveries?.reduce(
-          (acc: DeliverySchema[], item, index) => {
-            if (index !== i) {
-              acc.push(item);
-            }
-            return acc;
-          },
-          []
-        ) ?? [];
-
+      const updatedDeliveries = formik.values.deliveries?.filter(
+        (_, idx) => idx !== i
+      );
       formik.setFieldValue('deliveries', updatedDeliveries);
 
+      setSelectedDeliveries([]);
+
       if (deliveryQtyErrorShown) {
         toast.dismiss();
         setDeliveryQtyErrorShown(false);
       }
     },
-    [deliveryQtyErrorShown]
+    [formik.values.deliveries, deliveryQtyErrorShown, setSelectedDeliveries]
   );
 
   const bulkRemoveDelivery = useCallback(() => {
@@ -1682,7 +1671,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 </thead>
                 <tbody>
                   {formik.values.deliveries?.map((delivery, idx) => (
-                    <tr key={`delivery-row-${idx}`}>
+                    <tr
+                      key={`delivery-row-${idx}-${delivery.supplier_id}-${delivery.vehicle_plate}`}
+                    >
                       {type !== 'detail' && (
                         <td className='align-middle!'>
                           <CheckboxInput