#3301: deleting products in edit reimbursement request no longer overwrites items below

Author: gcooper407

src/frontend/src/pages/FinancePage/ReimbursementRequestForm/ReimbursementProductTable.tsx

@@ -41,7 +41,7 @@ import ErrorPage from '../../ErrorPage';
 import { formatReasonName } from '../../../utils/reimbursement-request.utils';
 
 interface ReimbursementProductTableProps {
-  reimbursementProducts: ReimbursementProductFormArgs[];
+  reimbursementProducts: (ReimbursementProductFormArgs & { id: string })[];
   removeProduct: (index: number) => void;
   appendProduct: (args: ReimbursementProductFormArgs) => void;
   wbsElementAutocompleteOptions: {
@@ -85,6 +85,7 @@ const ReimbursementProductTable: React.FC<ReimbursementProductTableProps> = ({
       name: string;
       cost: number;
       index: number;
+      id: string;
     }[]
   >();
 
@@ -104,9 +105,9 @@ const ReimbursementProductTable: React.FC<ReimbursementProductTableProps> = ({
     const productReason = hasWbsNum ? wbsPipe(product.reason as WbsNumber) : (product.reason as OtherProductReason).name;
     if (uniqueWbsElementsWithProducts.has(productReason)) {
       const products = uniqueWbsElementsWithProducts.get(productReason);
-      products?.push({ ...product, index });
+      products?.push({ ...product, index, id: product.id });
     } else {
-      uniqueWbsElementsWithProducts.set(productReason, [{ ...product, index }]);
+      uniqueWbsElementsWithProducts.set(productReason, [{ ...product, index, id: product.id }]);
     }
   });
 
@@ -442,7 +443,7 @@ const ReimbursementProductTable: React.FC<ReimbursementProductTableProps> = ({
                       )}
                     </Box>
                     {uniqueWbsElementsWithProducts.get(key)?.map((product) => (
-                      <ListItem key={product.index}>
+                      <ListItem key={product.id}>
                         <Box sx={{ display: 'flex' }}>
                           <Box
                             sx={{