Merge pull request #1945 from glific/dep-alerts

dep alert and package upgrades

package.json

@@ -25,31 +25,31 @@
     "@material-ui/pickers": "^3.2.10",
     "@material-ui/styles": "^4.11.3",
     "@stripe/react-stripe-js": "^1.7.0",
-    "@stripe/stripe-js": "^1.23.0",
+    "@stripe/stripe-js": "^1.24.0",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.4.1",
     "@types/draft-js": "^0.11.9",
     "@types/emoji-mart": "^3.0.9",
-    "@types/jest": "^27.4.0",
+    "@types/jest": "^27.4.1",
     "@types/markdown-draft-js": "^2.2.1",
-    "@types/node": "^17.0.18",
+    "@types/node": "^17.0.21",
     "@types/pino": "^7.0.5",
     "@types/react": "^17.0.39",
     "@types/react-color": "^3.0.6",
-    "@types/react-dom": "^17.0.11",
+    "@types/react-dom": "^17.0.12",
     "@types/react-google-recaptcha": "^2.1.4",
     "@types/react-i18next": "^8.1.0",
     "@types/react-linkify": "^1.0.0",
     "@types/react-router": "^5.1.18",
     "@types/react-router-dom": "^5.3.3",
-    "@types/styled-components": "^5.1.22",
+    "@types/styled-components": "^5.1.24",
     "@types/uuid": "^8.3.4",
     "@types/yup": "^0.29.11",
     "ajv-keywords": "^5.1.0",
     "apollo-absinthe-upload-link": "^1.7.0",
     "apollo-link-token-refresh": "^0.4.0",
-    "axios": "^0.25.0",
+    "axios": "^0.26.0",
     "clsx": "^1.1.1",
     "date-fns": "^2.28.0",
     "draft-js": "^0.11.6",
@@ -62,12 +62,12 @@
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-react": "^7.29.2",
     "eslint-plugin-react-hooks": "4.3.0",
     "formik": "^2.2.6",
     "formik-material-ui": "^4.0.0-alpha.2",
     "graphql": "^16.3.0",
-    "i18next": "^21.6.11",
+    "i18next": "^21.6.12",
     "i18next-browser-languagedetector": "^6.1.3",
     "markdown-draft-js": "^2.4.0",
     "moment": "^2.27.0",
@@ -80,7 +80,7 @@
     "react-dom": "^17.0.1",
     "react-draggable": "^4.4.3",
     "react-google-recaptcha": "^2.1.0",
-    "react-i18next": "^11.15.4",
+    "react-i18next": "^11.15.5",
     "react-image": "^4.0.3",
     "react-linkify": "^1.0.0-alpha",
     "react-media-recorder": "^1.6.3",
@@ -94,7 +94,7 @@
     "react-viewer": "^3.2.2",
     "styled-components": "^5.3.3",
     "subscriptions-transport-ws": "^0.11.0",
-    "typescript": "~4.5.5",
+    "typescript": "~4.6.2",
     "uuid": "^8.3.2",
     "winston-logflare": "^0.1.1",
     "yup": "^0.32.11"

src/containers/InteractiveMessage/InteractiveOptions/ListReplyTemplate.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button, TextField, FormHelperText, FormControl } from '@material-ui/core';
 import { FieldArray } from 'formik';
+import { v4 as uuidv4 } from 'uuid';
 
 import { ReactComponent as DeleteIcon } from 'assets/images/icons/Delete/Red.svg';
 import { ReactComponent as CrossIcon } from 'assets/images/icons/Cross.svg';
@@ -133,7 +134,7 @@ export const ListReplyTemplate: React.SFC<ListReplyTemplateProps> = (props) => {
             name={`templateButtons[${index}].options`}
             render={(arrayHelpers) =>
               options.map((itemRow: any, itemIndex: any) => (
-                <div key={itemIndex.toString()}>
+                <div key={uuidv4()}>
                   <div className={styles.ListReplyItemWrapper}>
                     <div className={styles.ListReplyItemContent}>
                       <div className={styles.TextFieldWrapper}>