diff --git a/.betterer.results b/.betterer.results
index 20f039f9db5..f72393aa21f 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -92,9 +92,6 @@ exports[`no enzyme tests`] = {
     "public/app/plugins/datasource/loki/configuration/ConfigEditor.test.tsx:2659566901": [
       [0, 17, 13, "RegExp match", "2409514259"]
     ],
-    "public/app/plugins/datasource/loki/configuration/DebugSection.test.tsx:1551927716": [
-      [0, 17, 13, "RegExp match", "2409514259"]
-    ],
     "public/app/plugins/datasource/loki/configuration/DerivedField.test.tsx:3570129984": [
       [0, 19, 13, "RegExp match", "2409514259"]
     ],
@@ -7258,12 +7255,8 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "public/app/plugins/datasource/loki/configuration/DebugSection.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "3"],
-      [0, 0, 0, "Do not use any type assertions.", "4"],
-      [0, 0, 0, "Do not use any type assertions.", "5"]
+      [0, 0, 0, "Do not use any type assertions.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
     "public/app/plugins/datasource/loki/configuration/DerivedField.test.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
diff --git a/public/app/plugins/datasource/loki/configuration/DebugSection.test.tsx b/public/app/plugins/datasource/loki/configuration/DebugSection.test.tsx
index 82d6b2064ea..6eb14771d10 100644
--- a/public/app/plugins/datasource/loki/configuration/DebugSection.test.tsx
+++ b/public/app/plugins/datasource/loki/configuration/DebugSection.test.tsx
@@ -1,4 +1,5 @@
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import React from 'react';
 
 import { dateTime, TimeRange } from '@grafana/data';
@@ -48,20 +49,12 @@ describe('DebugSection', () => {
     setLinkSrv(originalLinkSrv);
   });
 
-  it('does not render any field if no debug text', () => {
-    const wrapper = mount(<DebugSection derivedFields={[]} />);
-    expect(wrapper.find('DebugFieldItem').length).toBe(0);
+  it('does not render any table rows if no debug text', () => {
+    render(<DebugSection derivedFields={[]} />);
+    expect(screen.queryByRole('row')).not.toBeInTheDocument();
   });
 
-  it('does not render any field if no derived fields', () => {
-    const wrapper = mount(<DebugSection derivedFields={[]} />);
-    const textarea = wrapper.find('textarea');
-    (textarea.getDOMNode() as HTMLTextAreaElement).value = 'traceId=1234';
-    textarea.simulate('change');
-    expect(wrapper.find('DebugFieldItem').length).toBe(0);
-  });
-
-  it('renders derived fields', () => {
+  it('renders derived fields as table rows', async () => {
     const derivedFields = [
       {
         matcherRegex: 'traceId=(\\w+)',
@@ -78,14 +71,14 @@ describe('DebugSection', () => {
       },
     ];
 
-    const wrapper = mount(<DebugSection derivedFields={derivedFields} />);
-    const textarea = wrapper.find('textarea');
-    (textarea.getDOMNode() as HTMLTextAreaElement).value = 'traceId=1234';
-    textarea.simulate('change');
+    render(<DebugSection derivedFields={derivedFields} />);
+    const textarea = screen.getByRole('textbox');
+    await userEvent.type(textarea, 'traceId=1234');
 
-    expect(wrapper.find('table').length).toBe(1);
+    expect(screen.getByRole('table')).toBeInTheDocument();
     // 3 rows + one header
-    expect(wrapper.find('tr').length).toBe(4);
-    expect(wrapper.find('tr').at(1).contains('http://localhost/trace/${__value.raw}')).toBeTruthy();
+    const rows = screen.getAllByRole('row');
+    expect(rows.length).toBe(4);
+    expect(rows[1]).toHaveTextContent('http://localhost/trace/${__value.raw}');
   });
 });
diff --git a/public/app/plugins/datasource/loki/configuration/DebugSection.tsx b/public/app/plugins/datasource/loki/configuration/DebugSection.tsx
index 49f8c958e5e..a5eeb577400 100644
--- a/public/app/plugins/datasource/loki/configuration/DebugSection.tsx
+++ b/public/app/plugins/datasource/loki/configuration/DebugSection.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import cx from 'classnames';
-import React, { useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 
 import { ArrayVector, Field, FieldType, LinkModel } from '@grafana/data';
 import { LegacyForms } from '@grafana/ui';
@@ -62,8 +62,8 @@ const DebugFields = ({ fields }: DebugFieldItemProps) => {
       </thead>
       <tbody>
         {fields.map((field) => {
-          let value: any = field.value;
-          if (field.error) {
+          let value: ReactNode = field.value;
+          if (field.error && field.error instanceof Error) {
             value = field.error.message;
           } else if (field.href) {
             value = <a href={field.href}>{value}</a>;
@@ -83,7 +83,7 @@ const DebugFields = ({ fields }: DebugFieldItemProps) => {
 
 type DebugField = {
   name: string;
-  error?: any;
+  error?: unknown;
   value?: string;
   href?: string;
 };
@@ -112,16 +112,18 @@ function makeDebugFields(derivedFields: DerivedFieldConfig[], debugText: string)
           })[0];
         }
 
-        return {
+        const result: DebugField = {
           name: field.name,
           value: value || '<no match>',
-          href: link && link.href,
-        } as DebugField;
+          href: link ? link.href : undefined,
+        };
+        return result;
       } catch (error) {
-        return {
+        const result: DebugField = {
           name: field.name,
           error,
-        } as DebugField;
+        };
+        return result;
       }
     });
 }