diff --git a/frontend/src/container/GridGraphLayout/Graph/index.tsx b/frontend/src/container/GridGraphLayout/Graph/index.tsx
index 29390c7036..53d8ad4180 100644
--- a/frontend/src/container/GridGraphLayout/Graph/index.tsx
+++ b/frontend/src/container/GridGraphLayout/Graph/index.tsx
@@ -83,14 +83,14 @@ function GridCardGraph({
 	const queryResponse = useGetQueryRange(
 		{
 			selectedTime: widget?.timePreferance,
-			graphType: widget.panelTypes,
-			query: widget.query,
+			graphType: widget?.panelTypes,
+			query: widget?.query,
 			globalSelectedInterval,
 			variables: getDashboardVariables(),
 		},
 		{
 			queryKey: [
-				`GetMetricsQueryRange-${widget?.timePreferance}-${globalSelectedInterval}-${widget.id}`,
+				`GetMetricsQueryRange-${widget?.timePreferance}-${globalSelectedInterval}-${widget?.id}`,
 				widget,
 				maxTime,
 				minTime,
@@ -173,7 +173,7 @@ function GridCardGraph({
 				{
 					data: selectedDashboard.data,
 					generateWidgetId: uuid,
-					graphType: widget.panelTypes,
+					graphType: widget?.panelTypes,
 					selectedDashboard,
 					layout,
 					widgetData: widget,
@@ -187,7 +187,7 @@ function GridCardGraph({
 
 				setTimeout(() => {
 					history.push(
-						`${history.location.pathname}/new?graphType=${widget.panelTypes}&widgetId=${uuid}`,
+						`${history.location.pathname}/new?graphType=${widget?.panelTypes}&widgetId=${uuid}`,
 					);
 				}, 1500);
 			});
@@ -253,10 +253,10 @@ function GridCardGraph({
 							/>
 						</div>
 						<GridGraphComponent
-							GRAPH_TYPES={widget.panelTypes}
+							GRAPH_TYPES={widget?.panelTypes}
 							data={prevChartDataSetRef}
-							isStacked={widget.isStacked}
-							opacity={widget.opacity}
+							isStacked={widget?.isStacked}
+							opacity={widget?.opacity}
 							title={' '}
 							name={name}
 							yAxisUnit={yAxisUnit}
diff --git a/frontend/src/container/GridGraphLayout/index.tsx b/frontend/src/container/GridGraphLayout/index.tsx
index d299e01e7e..2235b93708 100644
--- a/frontend/src/container/GridGraphLayout/index.tsx
+++ b/frontend/src/container/GridGraphLayout/index.tsx
@@ -124,8 +124,7 @@ function GridGraph(props: Props): JSX.Element {
 				}
 			}
 		})();
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, []);
+	}, [dispatch, isAddWidget, layouts, selectedDashboard, widgets]);
 
 	const { featureResponse } = useSelector<AppState, AppReducer>(
 		(state) => state.app,