diff --git a/public/components/metrics/index.tsx b/public/components/metrics/index.tsx
index 348e79f8c9..493a9f5521 100644
--- a/public/components/metrics/index.tsx
+++ b/public/components/metrics/index.tsx
@@ -55,7 +55,7 @@ export const Home = ({
   // Side bar constants
   const [selectedDataSource, setSelectedDataSource] = useState<OptionType[]>([]);
   const [selectedOTIndex, setSelectedOTIndex] = useState([]);
-  const [dataSourceMDSId, setDataSourceMDSId] = useState<string>('');
+  const [dataSourceMDSId, setDataSourceMDSId] = useState<string | null>(null);
   const [reloadSidebar, setReloadSidebar] = useState<boolean>(false);
 
   useEffect(() => {
@@ -77,7 +77,7 @@ export const Home = ({
   const dispatch = useDispatch();
 
   const onSelectedDataSource = async (dataSources: DataSourceOption[]) => {
-    const id = dataSources[0] ? dataSources[0].id : '';
+    const id = dataSources[0] ? dataSources[0].id : null;
     setDataSourceMDSId(id);
     debounce(() => {
       dispatch(setSelectedDataSourceMDSId(id));
@@ -111,7 +111,7 @@ export const Home = ({
           path={['/:id', '/']}
           render={(routerProps) => (
             <div>
-              {reloadSidebar && (
+              {(dataSourceEnabled ? dataSourceMDSId !== null : true) && reloadSidebar && (
                 <EuiPage>
                   <EuiPageBody component="div">
                     <TopMenu />
@@ -133,6 +133,7 @@ export const Home = ({
                                 selectedOTIndex={selectedOTIndex}
                                 setSelectedOTIndex={setSelectedOTIndex}
                                 dataSourceMDSId={dataSourceMDSId}
+                                dataSourceEnabled={dataSourceEnabled}
                               />
                             </EuiResizablePanel>
 
diff --git a/public/components/metrics/sidebar/sidebar.tsx b/public/components/metrics/sidebar/sidebar.tsx
index 83e1711fc9..986cfb40d4 100644
--- a/public/components/metrics/sidebar/sidebar.tsx
+++ b/public/components/metrics/sidebar/sidebar.tsx
@@ -40,7 +40,8 @@ interface SideBarMenuProps {
   selectedOTIndex: React.SetStateAction<Array<{}>>;
   setSelectedOTIndex: React.Dispatch<React.SetStateAction<unknown>>;
   additionalSelectedMetricId?: string;
-  dataSourceMDSId: string;
+  dataSourceMDSId: string | null;
+  dataSourceEnabled: boolean;
 }
 export const Sidebar = ({
   selectedDataSource,
@@ -49,6 +50,7 @@ export const Sidebar = ({
   setSelectedOTIndex,
   additionalSelectedMetricId,
   dataSourceMDSId,
+  dataSourceEnabled,
 }: SideBarMenuProps) => {
   const dispatch = useDispatch();
   const [availableOTDocuments, setAvailableOTDocuments] = useState([]);
@@ -95,6 +97,11 @@ export const Sidebar = ({
   }, [selectedMetrics, selectedMetricsIds, dataSourceMDSId]);
 
   useEffect(() => {
+    // If data source is enabled but is still null prevent the invalid call
+    if (dataSourceEnabled && dataSourceMDSId === null) {
+      return;
+    }
+
     if (selectedOTIndex.length > 0 && selectedDataSource[0]?.label === 'OpenTelemetry') {
       const fetchOtelDocuments = async () => {
         try {