diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
index 03c902a3880..2f5d295ef2c 100644
--- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
+++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
@@ -78,17 +78,36 @@ export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
   } = props;
 
   const [isAccessHelpVisible, setIsAccessHelpVisible] = useState(false);
+  const [azureAuthEnabled, setAzureAuthEnabled] = useState(false);
   const theme = useTheme2();
   let urlTooltip;
 
   const onSettingsChange = useCallback(
     (change: Partial<typeof dataSourceConfig>) => {
+      // Azure Authentication doesn't work correctly when Forward OAuth Identity is enabled.
+      // The Authorization header that has been set by the ApplyAzureAuth middleware gets overwritten
+      // with the Authorization header set by the OAuthTokenMiddleware.
+      const isAzureAuthEnabled =
+        (azureAuthSettings?.azureAuthSupported && azureAuthSettings.getAzureAuthEnabled(dataSourceConfig)) || false;
+      setAzureAuthEnabled(isAzureAuthEnabled);
+      if (isAzureAuthEnabled) {
+        const tmpOauthPassThru =
+          dataSourceConfig.jsonData.oauthPassThru !== undefined ? dataSourceConfig.jsonData.oauthPassThru : false;
+        change = {
+          ...change,
+          jsonData: {
+            ...dataSourceConfig.jsonData,
+            oauthPassThru: isAzureAuthEnabled ? false : tmpOauthPassThru,
+          },
+        };
+      }
+
       onChange({
         ...dataSourceConfig,
         ...change,
       });
     },
-    [dataSourceConfig, onChange]
+    [azureAuthSettings, dataSourceConfig, onChange]
   );
 
   switch (dataSourceConfig.access) {
@@ -145,15 +164,6 @@ export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
     />
   );
 
-  const azureAuthEnabled: boolean =
-    (azureAuthSettings?.azureAuthSupported && azureAuthSettings.getAzureAuthEnabled(dataSourceConfig)) || false;
-
-  // Azure Authentication doesn't work correctly when Forward OAuth Identity is enabled.
-  // The Authorization header that has been set by the ApplyAzureAuth middleware gets overwritten
-  // with the Authorization header set by the OAuthTokenMiddleware.
-  dataSourceConfig.jsonData.oauthPassThru = azureAuthEnabled ? false : dataSourceConfig.jsonData.oauthPassThru;
-  const shouldShowForwardOAuthIdentityOption = azureAuthEnabled ? false : showForwardOAuthIdentityOption;
-
   return (
     <div className="gf-form-group">
       <>
@@ -301,7 +311,7 @@ export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
             <HttpProxySettings
               dataSourceConfig={dataSourceConfig}
               onChange={(jsonData) => onSettingsChange({ jsonData })}
-              showForwardOAuthIdentityOption={shouldShowForwardOAuthIdentityOption}
+              showForwardOAuthIdentityOption={azureAuthEnabled ? false : showForwardOAuthIdentityOption}
             />
           )}
         </div>