diff --git a/src/components/options/ColumnSortingEditor.tsx b/src/components/options/ColumnSortingEditor.tsx
index 2de9d08..6354eed 100644
--- a/src/components/options/ColumnSortingEditor.tsx
+++ b/src/components/options/ColumnSortingEditor.tsx
@@ -1,6 +1,6 @@
 import { SelectableValue, StandardEditorProps } from '@grafana/data';
-import { Box, Button, IconButton, InlineField, Select, Stack, Text } from '@grafana/ui';
-import React from 'react';
+import { Box, Button, IconButton, InlineField, Input, Select, Stack } from '@grafana/ui';
+import React, { FormEvent } from 'react';
 import { ColumnSorting, ColumnSortingOptions } from 'types';
 
 function getSortingValue(item: string): ColumnSortingOptions {
@@ -19,10 +19,11 @@ export function ColumnSortingEditor(props: StandardEditorProps<ColumnSorting[]>)
     onChange([...value.slice(0, index), ...value.slice(index + 1)]);
   }
 
-  function handleIndexChange(event: React.ChangeEvent<HTMLInputElement>, selectIndex: number) {
+  function handleIndexChange(event: FormEvent<HTMLInputElement>, selectIndex: number) {
+    const target = event.target as HTMLInputElement;
     const newSorting = value.map((item: ColumnSorting, itemIndex: number) => {
       if (itemIndex === selectIndex) {
-        return { index: parseInt(event.target.value, 10), order: item.order };
+        return { index: parseInt(target.value, 10), order: item.order };
       }
       return item;
     });
@@ -45,7 +46,7 @@ export function ColumnSortingEditor(props: StandardEditorProps<ColumnSorting[]>)
       <div key={index} style={{ width: '100%' }}>
         <Stack justifyContent="start" direction="row" alignItems="start">
           <InlineField label="Column" tooltip="Name of the column to sort">
-            <input
+            <Input
               type="number"
               value={items.index}
               onChange={(event) => {
diff --git a/src/components/options/ColumnWidthHintsEditor.tsx b/src/components/options/ColumnWidthHintsEditor.tsx
index 213a040..cd36da4 100644
--- a/src/components/options/ColumnWidthHintsEditor.tsx
+++ b/src/components/options/ColumnWidthHintsEditor.tsx
@@ -1,6 +1,6 @@
 import { SelectableValue, StandardEditorProps } from '@grafana/data';
-import { Box, Button, IconButton, InlineField, Select, Stack, Text } from '@grafana/ui';
-import React from 'react';
+import { Box, Button, IconButton, InlineField, Input, Select, Stack } from '@grafana/ui';
+import React, { FormEvent } from 'react';
 import { getDataFramesFields } from 'transformations';
 import { ColumnWidthHint } from 'types';
 
@@ -34,10 +34,11 @@ export function ColumnWidthHints(props: StandardEditorProps<ColumnWidthHint[]>)
     onChange(newWidths);
   }
 
-  function handleWidthChange(event: React.ChangeEvent<HTMLInputElement>, selectIndex: number) {
+  function handleWidthChange(event: FormEvent<HTMLInputElement>, selectIndex: number) {
+    const target = event.target as HTMLInputElement;
     const newWidths = value.map((item: ColumnWidthHint, index: number) => {
       if (index === selectIndex) {
-        return { name: item.name, width: event.target.value };
+        return { name: item.name, width: target.value };
       }
       return item;
     });
@@ -61,7 +62,7 @@ export function ColumnWidthHints(props: StandardEditorProps<ColumnWidthHint[]>)
             />
           </InlineField>
           <InlineField label="Width" tooltip="The width hint to apply. (add % or px)">
-            <input
+            <Input
               value={item.width || ''}
               onChange={(event) => {
                 handleWidthChange(event, index);