diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
index b27d5be241..f0bf8289f6 100644
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@@ -41,6 +41,7 @@ module.exports = {
 		'react/prop-types': 'off',
 		'@typescript-eslint/explicit-function-return-type': 'error',
 		'@typescript-eslint/no-var-requires': 0,
+		'react/no-array-index-key': 2,
 		'linebreak-style': ['error', 'unix'],
 
 		// simple sort error
diff --git a/frontend/src/AppRoutes/index.tsx b/frontend/src/AppRoutes/index.tsx
index f3b333616f..f99557b3e4 100644
--- a/frontend/src/AppRoutes/index.tsx
+++ b/frontend/src/AppRoutes/index.tsx
@@ -13,8 +13,8 @@ const App = (): JSX.Element => (
 		<AppLayout>
 			<Suspense fallback={<Spinner size="large" tip="Loading..." />}>
 				<Switch>
-					{routes.map(({ path, component, exact }, index) => (
-						<Route key={index} exact={exact} path={path} component={component} />
+					{routes.map(({ path, component, exact }) => (
+						<Route key={`${path}`} exact={exact} path={path} component={component} />
 					))}
 					<Redirect from="/" to={ROUTES.APPLICATION} />
 					<Route component={NotFound} />
diff --git a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
index 6c1c194fa1..61fcc1b4d2 100644
--- a/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
+++ b/frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
@@ -52,7 +52,7 @@ const QuerySection = ({
 				<Query
 					currentIndex={index}
 					selectedTime={selectedTime}
-					key={e.query + index}
+					key={`${e.query} ${e.query.length}`}
 					preQuery={e.query}
 					preLegend={e.legend || ''}
 				/>