diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
index 726eb17fff7..292b1df8b68 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx
@@ -1,6 +1,6 @@
 import { selectors } from '@grafana/e2e-selectors';
 import { Field, Label } from '@grafana/ui';
-import React, { ComponentType, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor';
 
 export interface OptionsPaneItemProps {
@@ -8,7 +8,7 @@ export interface OptionsPaneItemProps {
   value?: any;
   description?: string;
   popularRank?: number;
-  Component: ComponentType;
+  render: () => React.ReactNode;
   skipField?: boolean;
   showIf?: () => boolean;
 }
@@ -51,7 +51,7 @@ export class OptionsPaneItemDescriptor {
   }
 
   render(isSearching?: boolean) {
-    const { title, description, Component, showIf, skipField } = this.props;
+    const { title, description, render, showIf, skipField } = this.props;
     const key = `${this.parent.props.id} ${title}`;
 
     if (showIf && !showIf()) {
@@ -59,7 +59,7 @@ export class OptionsPaneItemDescriptor {
     }
 
     if (skipField) {
-      return <Component key={key} />;
+      return render();
     }
 
     return (
@@ -69,7 +69,7 @@ export class OptionsPaneItemDescriptor {
         key={key}
         aria-label={selectors.components.PanelEditor.OptionsPane.fieldLabel(key)}
       >
-        <Component />
+        {render() as React.ReactElement}
       </Field>
     );
   }
diff --git a/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx b/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx
index faa9cb00070..481b9325e71 100644
--- a/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx
@@ -110,7 +110,7 @@ export function getFieldOverrideCategories(props: OptionPaneRenderProps): Option
     category.addItem(
       new OptionsPaneItemDescriptor({
         title: matcherUi.name,
-        Component: function renderMatcherUI() {
+        render: function renderMatcherUI() {
           return (
             <matcherUi.component
               matcher={matcherUi.matcher}
@@ -151,7 +151,7 @@ export function getFieldOverrideCategories(props: OptionPaneRenderProps): Option
         new OptionsPaneItemDescriptor({
           title: registryItemForProperty.name,
           skipField: true,
-          Component: function renderPropertyEditor() {
+          render: function renderPropertyEditor() {
             return (
               <DynamicConfigValueEditor
                 key={`${property.id}/${propIdx}`}
@@ -176,7 +176,7 @@ export function getFieldOverrideCategories(props: OptionPaneRenderProps): Option
         new OptionsPaneItemDescriptor({
           title: '----------',
           skipField: true,
-          Component: function renderAddPropertyButton() {
+          render: function renderAddPropertyButton() {
             return (
               <ValuePicker
                 label="Add override property"
diff --git a/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx b/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
index c89f182ce99..adb189673b2 100644
--- a/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
@@ -19,7 +19,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
         title: 'Title',
         value: panel.title,
         popularRank: 1,
-        Component: function renderTitle() {
+        render: function renderTitle() {
           return (
             <Input
               id="PanelFrameTitle"
@@ -35,7 +35,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
         title: 'Description',
         description: panel.description,
         value: panel.description,
-        Component: function renderDescription() {
+        render: function renderDescription() {
           return (
             <TextArea
               defaultValue={panel.description}
@@ -48,7 +48,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
     .addItem(
       new OptionsPaneItemDescriptor({
         title: 'Transparent background',
-        Component: function renderTransparent() {
+        render: function renderTransparent() {
           return (
             <Switch
               value={panel.transparent}
@@ -67,7 +67,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
       }).addItem(
         new OptionsPaneItemDescriptor({
           title: 'Panel links',
-          Component: function renderLinks() {
+          render: function renderLinks() {
             return (
               <DataLinksInlineEditor
                 links={panel.links}
@@ -91,7 +91,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
             title: 'Repeat by variable',
             description:
               'Repeat this panel for each value in the selected variable. This is not visible while in edit mode. You need to go back to dashboard and then update the variable or reload the dashboard.',
-            Component: function renderRepeatOptions() {
+            render: function renderRepeatOptions() {
               return (
                 <RepeatRowSelect
                   repeat={panel.repeat}
@@ -107,7 +107,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
           new OptionsPaneItemDescriptor({
             title: 'Repeat direction',
             showIf: () => !!panel.repeat,
-            Component: function renderRepeatOptions() {
+            render: function renderRepeatOptions() {
               const directionOptions = [
                 { label: 'Horizontal', value: 'h' },
                 { label: 'Vertical', value: 'v' },
@@ -127,7 +127,7 @@ export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPane
           new OptionsPaneItemDescriptor({
             title: 'Max per row',
             showIf: () => Boolean(panel.repeat && panel.repeatDirection === 'h'),
-            Component: function renderOption() {
+            render: function renderOption() {
               const maxPerRowOptions = [2, 3, 4, 6, 8, 12].map((value) => ({ label: value.toString(), value }));
               return (
                 <Select
diff --git a/public/app/features/dashboard/components/PanelEditor/getVizualizationOptions.tsx b/public/app/features/dashboard/components/PanelEditor/getVizualizationOptions.tsx
index 93ea214c492..0600f143b4a 100644
--- a/public/app/features/dashboard/components/PanelEditor/getVizualizationOptions.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/getVizualizationOptions.tsx
@@ -48,7 +48,7 @@ export function getVizualizationOptions(props: OptionPaneRenderProps): OptionsPa
       new OptionsPaneItemDescriptor({
         title: pluginOption.name,
         description: pluginOption.description,
-        Component: function renderEditor() {
+        render: function renderEditor() {
           const onChange = (value: any) => {
             const newOptions = lodashSet({ ...currentOptions }, pluginOption.path, value);
             onPanelOptionsChanged(newOptions);
@@ -101,7 +101,7 @@ export function getVizualizationOptions(props: OptionPaneRenderProps): OptionsPa
       new OptionsPaneItemDescriptor({
         title: fieldOption.name,
         description: fieldOption.description,
-        Component: function renderEditor() {
+        render: function renderEditor() {
           const onChange = (v: any) => {
             onFieldConfigsChange(
               updateDefaultFieldConfigValue(currentFieldConfig, fieldOption.path, v, fieldOption.isCustom)
diff --git a/public/app/features/dashboard/components/PanelEditor/state/OptionSearchEngine.test.ts b/public/app/features/dashboard/components/PanelEditor/state/OptionSearchEngine.test.ts
index d75894bf70c..bb9d42bc0d7 100644
--- a/public/app/features/dashboard/components/PanelEditor/state/OptionSearchEngine.test.ts
+++ b/public/app/features/dashboard/components/PanelEditor/state/OptionSearchEngine.test.ts
@@ -50,20 +50,20 @@ function getOptionCategories(): OptionsPaneCategoryDescriptor[] {
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'Title',
-          Component: jest.fn(),
+          render: jest.fn(),
         })
       )
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'Min',
-          Component: jest.fn(),
+          render: jest.fn(),
         })
       )
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'ASDSADASDSADA',
           description: 'DescriptionMatch',
-          Component: jest.fn(),
+          render: jest.fn(),
         })
       ),
     new OptionsPaneCategoryDescriptor({
@@ -73,19 +73,19 @@ function getOptionCategories(): OptionsPaneCategoryDescriptor[] {
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'Min',
-          Component: jest.fn(),
+          render: jest.fn(),
         })
       )
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'DescriptionMatch',
-          Component: jest.fn(),
+          render: jest.fn(),
         })
       )
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'Frame',
-          Component: jest.fn(),
+          render: jest.fn(),
         })
       ),
   ];
@@ -100,19 +100,19 @@ function getOverrides(): OptionsPaneCategoryDescriptor[] {
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'Match by name',
-          Component: jest.fn(),
+          render: jest.fn(),
         })
       )
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'Min',
-          Component: jest.fn(),
+          render: jest.fn(),
         })
       )
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'Max',
-          Component: jest.fn(),
+          render: jest.fn(),
         })
       ),
     new OptionsPaneCategoryDescriptor({
@@ -122,19 +122,19 @@ function getOverrides(): OptionsPaneCategoryDescriptor[] {
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'Match by name',
-          Component: jest.fn(),
+          render: jest.fn(),
         })
       )
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'Threshold',
-          Component: jest.fn(),
+          render: jest.fn(),
         })
       )
       .addItem(
         new OptionsPaneItemDescriptor({
           title: 'Max',
-          Component: jest.fn(),
+          render: jest.fn(),
         })
       ),
   ];