diff --git a/contribute/style-guides/styling.md b/contribute/style-guides/styling.md
index 37c1bc1b1d1..550f5d3b69a 100644
--- a/contribute/style-guides/styling.md
+++ b/contribute/style-guides/styling.md
@@ -104,7 +104,7 @@ interface Props {
   className?: string;
 }
 
-const ComponentA: React.FC<Props> = ({ className }) => {
+function ComponentA({ className }: Props) {
   const finalClassName = cx(
     className,
     css`
@@ -113,5 +113,5 @@ const ComponentA: React.FC<Props> = ({ className }) => {
   );
 
   return <div className={finalClassName}>As red as you can ge</div>;
-};
+}
 ```
diff --git a/docs/sources/developers/plugins/add-support-for-variables.md b/docs/sources/developers/plugins/add-support-for-variables.md
index f164d09a8ae..0de49db777f 100644
--- a/docs/sources/developers/plugins/add-support-for-variables.md
+++ b/docs/sources/developers/plugins/add-support-for-variables.md
@@ -31,11 +31,11 @@ For panels, the `replaceVariables` function is available in the PanelProps.
 Add `replaceVariables` to the argument list, and pass it a user-defined template string.
 
 ```ts
-export const SimplePanel: React.FC<Props> = ({ options, data, width, height, replaceVariables }) => {
+export function SimplePanel({ options, data, width, height, replaceVariables }: Props) {
   const query = replaceVariables('Now displaying $service');
 
   return <div>{query}</div>;
-};
+}
 ```
 
 ## Interpolate variables in data source plugins
diff --git a/docs/sources/developers/plugins/migration-guide.md b/docs/sources/developers/plugins/migration-guide.md
index a6bed37a28a..c36d233a4ff 100644
--- a/docs/sources/developers/plugins/migration-guide.md
+++ b/docs/sources/developers/plugins/migration-guide.md
@@ -708,9 +708,9 @@ import { PanelProps } from '@grafana/data';
 
 interface Props extends PanelProps<SimpleOptions> {}
 
-export const MyPanel: React.FC<Props> = ({ options, data, width, height }) => {
+export function MyPanel({ options, data, width, height }: Props) {
   // ...
-};
+}
 ```
 
 #### Migrate a data source plugin
diff --git a/docs/sources/developers/plugins/working-with-data-frames.md b/docs/sources/developers/plugins/working-with-data-frames.md
index e47cb4ac829..be7074a17a0 100644
--- a/docs/sources/developers/plugins/working-with-data-frames.md
+++ b/docs/sources/developers/plugins/working-with-data-frames.md
@@ -52,11 +52,11 @@ frame.name = 'http_requests_total';
 When you're building a panel plugin, the data frames returned by the data source are available from the `data` prop in your panel component.
 
 ```ts
-const SimplePanel: React.FC<Props> = ({ data }) => {
+function SimplePanel({ data: Props }) {
   const frame = data.series[0];
 
   // ...
-};
+}
 ```
 
 Before you start reading the data, think about what data you expect. For example, to visualize a time series we'd need at least one time field, and one number field.
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
index 9ee4f0c06e1..b0862fadf9f 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
@@ -114,14 +114,14 @@ export const TimePickerContentWithScreenSize: React.FC<PropsWithScreenSize> = (p
   );
 };
 
-export const TimePickerContent: React.FC<Props> = (props) => {
+export const TimePickerContent = (props: Props) => {
   const { widthOverride } = props;
   const theme = useTheme2();
   const isFullscreen = (widthOverride || window.innerWidth) >= theme.breakpoints.values.lg;
   return <TimePickerContentWithScreenSize {...props} isFullscreen={isFullscreen} />;
 };
 
-const NarrowScreenForm: React.FC<FormProps> = (props) => {
+const NarrowScreenForm = (props: FormProps) => {
   const { value, hideQuickRanges, onChange, timeZone, historyOptions = [], showHistory } = props;
   const theme = useTheme2();
   const styles = getNarrowScreenStyles(theme);
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeForm.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeForm.tsx
index 581001b1e68..64fad866e5c 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeForm.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeForm.tsx
@@ -44,7 +44,7 @@ const ERROR_MESSAGES = {
   range: '"From" can\'t be after "To"',
 };
 
-export const TimeRangeForm: React.FC<Props> = (props) => {
+export const TimeRangeForm = (props: Props) => {
   const { value, isFullscreen = false, timeZone, onApply: onApplyFromProps, isReversed, fiscalYearStartMonth } = props;
   const [fromValue, toValue] = valueToState(value.raw.from, value.raw.to, timeZone);
   const style = useStyles2(getStyles);
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx
index 71d2cf2d26b..45b0dfdcbaf 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx
@@ -36,7 +36,7 @@ interface Props {
   placeholderEmpty?: ReactNode;
 }
 
-export const TimeRangeList: React.FC<Props> = (props) => {
+export const TimeRangeList = (props: Props) => {
   const styles = getStyles();
   const { title, options, placeholderEmpty } = props;
 
@@ -60,7 +60,7 @@ export const TimeRangeList: React.FC<Props> = (props) => {
   );
 };
 
-const Options: React.FC<Props> = ({ options, value, onChange, title }) => {
+const Options = ({ options, value, onChange, title }: Props) => {
   const styles = getOptionsStyles();
 
   return (
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx
index 661b6ef7d27..0a25fd7ea5e 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.tsx
@@ -28,7 +28,7 @@ export interface Props {
   inputId?: string;
 }
 
-export const TimeZonePicker: React.FC<Props> = (props) => {
+export const TimeZonePicker = (props: Props) => {
   const {
     onChange,
     width,
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneTitle.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneTitle.tsx
index 754cf0ef4db..bc1d59b874e 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneTitle.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneTitle.tsx
@@ -9,7 +9,7 @@ interface Props {
   title: string | ReactNode;
 }
 
-export const TimeZoneTitle: React.FC<Props> = ({ title }) => {
+export const TimeZoneTitle = ({ title }: Props) => {
   const styles = useStyles2(getStyles);
 
   if (!title) {
diff --git a/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx
index eb6b16930a9..59dd368280a 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.tsx
@@ -22,7 +22,7 @@ const weekStarts: Array<SelectableValue<string>> = [
   { value: 'monday', label: 'Monday' },
 ];
 
-export const WeekStartPicker: React.FC<Props> = (props) => {
+export const WeekStartPicker = (props: Props) => {
   const { onChange, width, autoFocus = false, onBlur, value, disabled = false, inputId } = props;
 
   const onChangeWeekStart = useCallback(
diff --git a/packages/grafana-ui/src/components/Modal/ModalTabsHeader.tsx b/packages/grafana-ui/src/components/Modal/ModalTabsHeader.tsx
index dd2c09e129d..51c5d6c4cbf 100644
--- a/packages/grafana-ui/src/components/Modal/ModalTabsHeader.tsx
+++ b/packages/grafana-ui/src/components/Modal/ModalTabsHeader.tsx
@@ -23,7 +23,7 @@ interface Props {
   onChangeTab(tab: ModalTab): void;
 }
 
-export const ModalTabsHeader: React.FC<Props> = ({ icon, title, tabs, activeTab, onChangeTab }) => {
+export const ModalTabsHeader = ({ icon, title, tabs, activeTab, onChangeTab }: Props) => {
   return (
     <ModalHeader icon={icon} title={title}>
       <TabsBar hideBorder={true}>
diff --git a/packages/grafana-ui/src/components/Pagination/Pagination.tsx b/packages/grafana-ui/src/components/Pagination/Pagination.tsx
index a15cd40b81c..a28da5cab68 100644
--- a/packages/grafana-ui/src/components/Pagination/Pagination.tsx
+++ b/packages/grafana-ui/src/components/Pagination/Pagination.tsx
@@ -19,14 +19,14 @@ export interface Props {
   className?: string;
 }
 
-export const Pagination: React.FC<Props> = ({
+export const Pagination = ({
   currentPage,
   numberOfPages,
   onNavigate,
   hideWhenSinglePage,
   showSmallVersion,
   className,
-}) => {
+}: Props) => {
   const styles = useStyles2(getStyles);
   const pageLengthToCondense = showSmallVersion ? 1 : 8;
 
diff --git a/packages/grafana-ui/src/components/Typeahead/PartialHighlighter.tsx b/packages/grafana-ui/src/components/Typeahead/PartialHighlighter.tsx
index 13bbde407e5..b35967c8235 100644
--- a/packages/grafana-ui/src/components/Typeahead/PartialHighlighter.tsx
+++ b/packages/grafana-ui/src/components/Typeahead/PartialHighlighter.tsx
@@ -27,7 +27,7 @@ function getStartIndices(parts: HighlightPart[], length: number): number[] {
   return indices;
 }
 
-export const PartialHighlighter: React.FC<Props> = (props: Props) => {
+export const PartialHighlighter = (props: Props) => {
   let { highlightParts, text, highlightClassName } = props;
 
   if (!highlightParts?.length) {
diff --git a/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx b/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx
index 30c4b10fd2a..249fdc6e101 100644
--- a/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx
+++ b/packages/grafana-ui/src/components/Typeahead/TypeaheadInfo.tsx
@@ -34,7 +34,7 @@ interface Props {
   height: number;
 }
 
-export const TypeaheadInfo: React.FC<Props> = ({ item, height }) => {
+export const TypeaheadInfo = ({ item, height }: Props) => {
   const visible = item && !!item.documentation;
   const label = item ? item.label : '';
   const documentation = renderMarkdown(item?.documentation);
diff --git a/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx b/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx
index 660af9683c0..d3ac4b61f53 100644
--- a/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx
+++ b/packages/grafana-ui/src/components/Typeahead/TypeaheadItem.tsx
@@ -60,7 +60,7 @@ const getStyles = (theme: GrafanaTheme) => ({
   `,
 });
 
-export const TypeaheadItem: React.FC<Props> = (props: Props) => {
+export const TypeaheadItem = (props: Props) => {
   const styles = useStyles(getStyles);
 
   const { isSelected, item, prefix, style, onMouseEnter, onMouseLeave, onClickItem } = props;
diff --git a/public/app/core/components/CloseButton/CloseButton.tsx b/public/app/core/components/CloseButton/CloseButton.tsx
index 1a6d000a12b..8b26b6a7e74 100644
--- a/public/app/core/components/CloseButton/CloseButton.tsx
+++ b/public/app/core/components/CloseButton/CloseButton.tsx
@@ -10,7 +10,7 @@ type Props = {
   style?: React.CSSProperties;
 };
 
-export const CloseButton: React.FC<Props> = ({ onClick, 'aria-label': ariaLabel, style }) => {
+export const CloseButton = ({ onClick, 'aria-label': ariaLabel, style }: Props) => {
   const styles = useStyles2(getStyles);
   return (
     <IconButton aria-label={ariaLabel ?? 'Close'} className={styles} name="times" onClick={onClick} style={style} />
diff --git a/public/app/core/components/OptionsUI/string.tsx b/public/app/core/components/OptionsUI/string.tsx
index 771ec887340..82436b3460d 100644
--- a/public/app/core/components/OptionsUI/string.tsx
+++ b/public/app/core/components/OptionsUI/string.tsx
@@ -7,7 +7,7 @@ interface Props extends StandardEditorProps<string, StringFieldConfigSettings> {
   suffix?: ReactNode;
 }
 
-export const StringValueEditor: React.FC<Props> = ({ value, onChange, item, suffix }) => {
+export const StringValueEditor = ({ value, onChange, item, suffix }: Props) => {
   const Component = item.settings?.useTextarea ? TextArea : Input;
   const onValueChange = useCallback(
     (e: React.SyntheticEvent) => {
diff --git a/public/app/core/components/TimePicker/TimePickerWithHistory.tsx b/public/app/core/components/TimePicker/TimePickerWithHistory.tsx
index 85ccd92df81..4cacb3dda58 100644
--- a/public/app/core/components/TimePicker/TimePickerWithHistory.tsx
+++ b/public/app/core/components/TimePicker/TimePickerWithHistory.tsx
@@ -9,7 +9,7 @@ const LOCAL_STORAGE_KEY = 'grafana.dashboard.timepicker.history';
 
 interface Props extends Omit<TimeRangePickerProps, 'history' | 'theme'> {}
 
-export const TimePickerWithHistory: React.FC<Props> = (props) => {
+export const TimePickerWithHistory = (props: Props) => {
   return (
     <LocalStorageValueProvider<TimeRange[]> storageKey={LOCAL_STORAGE_KEY} defaultValue={[]}>
       {(values, onSaveToStore) => {
diff --git a/public/app/features/admin/UserListAdminPage.tsx b/public/app/features/admin/UserListAdminPage.tsx
index 070e636a956..dc9240b7921 100644
--- a/public/app/features/admin/UserListAdminPage.tsx
+++ b/public/app/features/admin/UserListAdminPage.tsx
@@ -55,7 +55,7 @@ interface OwnProps {}
 
 type Props = OwnProps & ConnectedProps<typeof connector>;
 
-const UserListAdminPageUnConnected: React.FC<Props> = ({
+const UserListAdminPageUnConnected = ({
   fetchUsers,
   query,
   changeQuery,
@@ -67,7 +67,7 @@ const UserListAdminPageUnConnected: React.FC<Props> = ({
   changeFilter,
   filters,
   isLoading,
-}) => {
+}: Props) => {
   const styles = useStyles2(getStyles);
 
   useEffect(() => {
diff --git a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
index 89d1a6d06d2..fb8e24452c9 100644
--- a/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
+++ b/public/app/features/dashboard/components/AddPanelWidget/AddPanelWidget.tsx
@@ -58,7 +58,7 @@ const getCopiedPanelPlugins = () => {
   return sortBy(copiedPanels, 'sort');
 };
 
-export const AddPanelWidgetUnconnected: React.FC<Props> = ({ panel, dashboard }) => {
+export const AddPanelWidgetUnconnected = ({ panel, dashboard }: Props) => {
   const [addPanelView, setAddPanelView] = useState(false);
 
   const onCancelAddPanel = (evt: React.MouseEvent<HTMLButtonElement>) => {
diff --git a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx
index 0b0168f6102..0ba8a16c5b4 100644
--- a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx
+++ b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx
@@ -19,7 +19,7 @@ type Props = {
 
 export const newAnnotationName = 'New annotation';
 
-export const AnnotationSettingsEdit: React.FC<Props> = ({ editIdx, dashboard }) => {
+export const AnnotationSettingsEdit = ({ editIdx, dashboard }: Props) => {
   const [annotation, setAnnotation] = useState(dashboard.annotations.list[editIdx]);
 
   const { value: ds } = useAsync(() => {
diff --git a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx
index 7e911b5f8a8..6d68762e4a7 100644
--- a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx
+++ b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx
@@ -14,7 +14,7 @@ type Props = {
   onEdit: (idx: number) => void;
 };
 
-export const AnnotationSettingsList: React.FC<Props> = ({ dashboard, onNew, onEdit }) => {
+export const AnnotationSettingsList = ({ dashboard, onNew, onEdit }: Props) => {
   const [annotations, updateAnnotations] = useState(dashboard.annotations.list);
 
   const onMove = (idx: number, direction: number) => {
diff --git a/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx b/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx
index 7a78192968a..389518dc204 100644
--- a/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx
+++ b/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx
@@ -24,7 +24,7 @@ const connector = connect(null, mapDispatchToProps);
 
 type Props = DeleteDashboardModalProps & ConnectedProps<typeof connector>;
 
-const DeleteDashboardModalUnconnected: React.FC<Props> = ({ hideModal, cleanUpDashboardAndVariables, dashboard }) => {
+const DeleteDashboardModalUnconnected = ({ hideModal, cleanUpDashboardAndVariables, dashboard }: Props) => {
   const isProvisioned = dashboard.meta.provisioned;
   const { onDeleteDashboard } = useDashboardDelete(dashboard.uid, cleanUpDashboardAndVariables);
 
diff --git a/public/app/features/dashboard/components/Inspector/InspectContent.tsx b/public/app/features/dashboard/components/Inspector/InspectContent.tsx
index 42af0e65e5d..616a1ffcf83 100644
--- a/public/app/features/dashboard/components/Inspector/InspectContent.tsx
+++ b/public/app/features/dashboard/components/Inspector/InspectContent.tsx
@@ -31,7 +31,7 @@ interface Props {
   onClose: () => void;
 }
 
-export const InspectContent: React.FC<Props> = ({
+export const InspectContent = ({
   panel,
   plugin,
   dashboard,
@@ -43,7 +43,7 @@ export const InspectContent: React.FC<Props> = ({
   defaultTab,
   onDataOptionsChange,
   onClose,
-}) => {
+}: Props) => {
   const [currentTab, setCurrentTab] = useState(defaultTab ?? InspectTab.Data);
 
   if (!plugin) {
diff --git a/public/app/features/dashboard/components/Inspector/PanelInspector.tsx b/public/app/features/dashboard/components/Inspector/PanelInspector.tsx
index f0b9cb05111..db5245673ce 100644
--- a/public/app/features/dashboard/components/Inspector/PanelInspector.tsx
+++ b/public/app/features/dashboard/components/Inspector/PanelInspector.tsx
@@ -26,7 +26,7 @@ export interface ConnectedProps {
 
 export type Props = OwnProps & ConnectedProps;
 
-const PanelInspectorUnconnected: React.FC<Props> = ({ panel, dashboard, plugin }) => {
+const PanelInspectorUnconnected = ({ panel, dashboard, plugin }: Props) => {
   const [dataOptions, setDataOptions] = useState<GetDataOptions>({
     withTransforms: false,
     withFieldConfig: true,
diff --git a/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx b/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx
index 3b74510d7be..66bd546dc76 100644
--- a/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx
+++ b/public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx
@@ -18,7 +18,7 @@ interface Props {
   dashboardId: number;
 }
 
-export const DashboardLinksDashboard: React.FC<Props> = (props) => {
+export const DashboardLinksDashboard = (props: Props) => {
   const { link, linkInfo } = props;
   const listRef = useRef<HTMLUListElement>(null);
   const [dropdownCssClass, setDropdownCssClass] = useState('invisible');
diff --git a/public/app/features/dimensions/editors/IconSelector.tsx b/public/app/features/dimensions/editors/IconSelector.tsx
index ab0e52c82cf..84e2841a481 100644
--- a/public/app/features/dimensions/editors/IconSelector.tsx
+++ b/public/app/features/dimensions/editors/IconSelector.tsx
@@ -9,7 +9,7 @@ interface Props {
   onChange: (v: string) => void;
 }
 
-const IconSelector: React.FC<Props> = ({ value, onChange }) => {
+const IconSelector = ({ value, onChange }: Props) => {
   const [icons, setIcons] = useState<SelectableValue[]>(value ? [{ value, label: value }] : []);
   const [icon, setIcon] = useState<string>();
   const iconRoot = (window as any).__grafana_public_path__ + 'img/icons/unicons/';
diff --git a/public/app/features/explore/LogsMetaRow.tsx b/public/app/features/explore/LogsMetaRow.tsx
index 0a117f43deb..f65d1d9d2f6 100644
--- a/public/app/features/explore/LogsMetaRow.tsx
+++ b/public/app/features/explore/LogsMetaRow.tsx
@@ -18,7 +18,7 @@ export type Props = {
   clearDetectedFields: () => void;
 };
 
-export const LogsMetaRow: React.FC<Props> = React.memo(
+export const LogsMetaRow = React.memo(
   ({
     meta,
     dedupStrategy,
@@ -29,7 +29,7 @@ export const LogsMetaRow: React.FC<Props> = React.memo(
     forceEscape,
     onEscapeNewlines,
     logRows,
-  }) => {
+  }: Props) => {
     const logsMetaItem: Array<LogsMetaItem | MetaItemProps> = [...meta];
 
     // Add deduplication info
diff --git a/public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx b/public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx
index 5dda93c458f..bee2c3b8f33 100644
--- a/public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx
+++ b/public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx
@@ -98,7 +98,7 @@ interface Props extends AddLibraryPanelContentsProps {
   isOpen?: boolean;
 }
 
-export const AddLibraryPanelModal: React.FC<Props> = ({ isOpen = false, panel, initialFolderId, ...props }) => {
+export const AddLibraryPanelModal = ({ isOpen = false, panel, initialFolderId, ...props }: Props) => {
   return (
     <Modal title="Create library panel" isOpen={isOpen} onDismiss={props.onDismiss}>
       <AddLibraryPanelContents panel={panel} initialFolderId={initialFolderId} onDismiss={props.onDismiss} />
diff --git a/public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx b/public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx
index 57f472a9d33..3386f2ce4d2 100644
--- a/public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx
+++ b/public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx
@@ -12,7 +12,7 @@ interface Props {
   formatDate?: (dateString: DateTimeInput, format?: string) => string;
 }
 
-export const LibraryPanelInformation: React.FC<Props> = ({ panel, formatDate }) => {
+export const LibraryPanelInformation = ({ panel, formatDate }: Props) => {
   const styles = useStyles(getStyles);
 
   if (!isPanelModelLibraryPanel(panel)) {
diff --git a/public/app/features/library-panels/components/SaveLibraryPanelModal/SaveLibraryPanelModal.tsx b/public/app/features/library-panels/components/SaveLibraryPanelModal/SaveLibraryPanelModal.tsx
index 8806b2ab5ad..34ef35fd7c1 100644
--- a/public/app/features/library-panels/components/SaveLibraryPanelModal/SaveLibraryPanelModal.tsx
+++ b/public/app/features/library-panels/components/SaveLibraryPanelModal/SaveLibraryPanelModal.tsx
@@ -17,14 +17,7 @@ interface Props {
   onDiscard: () => void;
 }
 
-export const SaveLibraryPanelModal: React.FC<Props> = ({
-  panel,
-  folderId,
-  isUnsavedPrompt,
-  onDismiss,
-  onConfirm,
-  onDiscard,
-}) => {
+export const SaveLibraryPanelModal = ({ panel, folderId, isUnsavedPrompt, onDismiss, onConfirm, onDiscard }: Props) => {
   const [searchString, setSearchString] = useState('');
   const dashState = useAsync(async () => {
     const searchHits = await getConnectedDashboards(panel.libraryPanel.uid);
diff --git a/public/app/features/library-panels/components/UnlinkModal/UnlinkModal.tsx b/public/app/features/library-panels/components/UnlinkModal/UnlinkModal.tsx
index 961c06f0dea..ee1bf5749a2 100644
--- a/public/app/features/library-panels/components/UnlinkModal/UnlinkModal.tsx
+++ b/public/app/features/library-panels/components/UnlinkModal/UnlinkModal.tsx
@@ -8,7 +8,7 @@ interface Props {
   onDismiss: () => void;
 }
 
-export const UnlinkModal: React.FC<Props> = ({ isOpen, onConfirm, onDismiss }) => {
+export const UnlinkModal = ({ isOpen, onConfirm, onDismiss }: Props) => {
   return (
     <ConfirmModal
       title="Do you really want to unlink this panel?"
diff --git a/public/app/features/live/pages/PipelineTable.tsx b/public/app/features/live/pages/PipelineTable.tsx
index 073417618af..308b486ac72 100644
--- a/public/app/features/live/pages/PipelineTable.tsx
+++ b/public/app/features/live/pages/PipelineTable.tsx
@@ -22,7 +22,7 @@ interface Props {
   selectRule?: Rule;
 }
 
-export const PipelineTable: React.FC<Props> = (props) => {
+export const PipelineTable = (props: Props) => {
   const { rules } = props;
   const [isOpen, setOpen] = useState(false);
   const [selectedRule, setSelectedRule] = useState<Rule>();
diff --git a/public/app/features/live/pages/RuleModal.tsx b/public/app/features/live/pages/RuleModal.tsx
index 95b4a8d4f2c..2f37514b388 100644
--- a/public/app/features/live/pages/RuleModal.tsx
+++ b/public/app/features/live/pages/RuleModal.tsx
@@ -31,7 +31,7 @@ const tabs: TabInfo[] = [
   { label: 'Test', isTest: true, icon: 'flask' },
 ];
 
-export const RuleModal: React.FC<Props> = (props) => {
+export const RuleModal = (props: Props) => {
   const { isOpen, onClose, clickColumn } = props;
   const [rule, setRule] = useState<Rule>(props.rule);
   const [activeTab, setActiveTab] = useState<TabInfo | undefined>(tabs.find((t) => t.type === clickColumn));
diff --git a/public/app/features/live/pages/RuleSettingsArray.tsx b/public/app/features/live/pages/RuleSettingsArray.tsx
index 44ba0c7ad70..8183cd334db 100644
--- a/public/app/features/live/pages/RuleSettingsArray.tsx
+++ b/public/app/features/live/pages/RuleSettingsArray.tsx
@@ -13,7 +13,7 @@ interface Props {
   entitiesInfo: PipeLineEntitiesInfo;
 }
 
-export const RuleSettingsArray: React.FC<Props> = ({ onChange, value, ruleType, entitiesInfo }) => {
+export const RuleSettingsArray = ({ onChange, value, ruleType, entitiesInfo }: Props) => {
   const [index, setIndex] = useState<number>(0);
   const arr = value ?? [];
   const onRuleChange = (v: RuleSetting) => {
diff --git a/public/app/features/live/pages/RuleSettingsEditor.tsx b/public/app/features/live/pages/RuleSettingsEditor.tsx
index d9457ee1d96..d82de4bd77e 100644
--- a/public/app/features/live/pages/RuleSettingsEditor.tsx
+++ b/public/app/features/live/pages/RuleSettingsEditor.tsx
@@ -11,7 +11,7 @@ interface Props {
   entitiesInfo: PipeLineEntitiesInfo;
 }
 
-export const RuleSettingsEditor: React.FC<Props> = ({ onChange, value, ruleType, entitiesInfo }) => {
+export const RuleSettingsEditor = ({ onChange, value, ruleType, entitiesInfo }: Props) => {
   return (
     <>
       <Select
diff --git a/public/app/features/live/pages/RuleTest.tsx b/public/app/features/live/pages/RuleTest.tsx
index 70e8622efa5..d4e7be155b9 100644
--- a/public/app/features/live/pages/RuleTest.tsx
+++ b/public/app/features/live/pages/RuleTest.tsx
@@ -11,7 +11,7 @@ interface Props {
   rule: Rule;
 }
 
-export const RuleTest: React.FC<Props> = (props) => {
+export const RuleTest = (props: Props) => {
   const [response, setResponse] = useState<ChannelFrame[]>();
   const [data, setData] = useState<string>();
   const styles = useStyles(getStyles);
diff --git a/public/app/features/panel/components/VizTypePicker/VizTypePickerPlugin.tsx b/public/app/features/panel/components/VizTypePicker/VizTypePickerPlugin.tsx
index c792da0f90e..206e814b416 100644
--- a/public/app/features/panel/components/VizTypePicker/VizTypePickerPlugin.tsx
+++ b/public/app/features/panel/components/VizTypePicker/VizTypePickerPlugin.tsx
@@ -11,7 +11,7 @@ interface Props {
   disabled: boolean;
 }
 
-export const VizTypePickerPlugin: React.FC<Props> = ({ isCurrent, plugin, onClick, disabled }) => {
+export const VizTypePickerPlugin = ({ isCurrent, plugin, onClick, disabled }: Props) => {
   return (
     <PanelTypeCard
       title={plugin.name}
diff --git a/public/app/features/transformers/FilterByValueTransformer/FilterByValueFilterEditor.tsx b/public/app/features/transformers/FilterByValueTransformer/FilterByValueFilterEditor.tsx
index 219d68fd291..f8f3440a3d3 100644
--- a/public/app/features/transformers/FilterByValueTransformer/FilterByValueFilterEditor.tsx
+++ b/public/app/features/transformers/FilterByValueTransformer/FilterByValueFilterEditor.tsx
@@ -18,7 +18,7 @@ export interface DataFrameFieldsInfo {
   fieldByDisplayName: Record<string, Field>;
 }
 
-export const FilterByValueFilterEditor: React.FC<Props> = (props) => {
+export const FilterByValueFilterEditor = (props: Props) => {
   const { onDelete, onChange, filter, fieldsInfo } = props;
   const { fieldsAsOptions, fieldByDisplayName } = fieldsInfo;
   const fieldName = getFieldName(filter, fieldsAsOptions) ?? '';
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/LookbackPeriodSelect.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/LookbackPeriodSelect.tsx
index 8a31e9125f9..98728e6942e 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/LookbackPeriodSelect.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/LookbackPeriodSelect.tsx
@@ -12,7 +12,7 @@ export interface Props {
   current?: string;
 }
 
-export const LookbackPeriodSelect: React.FC<Props> = ({ refId, current, templateVariableOptions, onChange }) => {
+export const LookbackPeriodSelect = ({ refId, current, templateVariableOptions, onChange }: Props) => {
   const options = LOOKBACK_PERIODS.map((lp) => ({
     ...lp,
     label: lp.text,
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLO.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLO.tsx
index 71561804469..34fa710a751 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLO.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLO.tsx
@@ -14,7 +14,7 @@ export interface Props {
   datasource: CloudMonitoringDatasource;
 }
 
-export const SLO: React.FC<Props> = ({ refId, query, templateVariableOptions, onChange, datasource }) => {
+export const SLO = ({ refId, query, templateVariableOptions, onChange, datasource }: Props) => {
   const [slos, setSLOs] = useState<Array<SelectableValue<string>>>([]);
   const { projectName, serviceId } = query;
 
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Selector.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Selector.tsx
index 250d19e03d6..e338c906781 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Selector.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Selector.tsx
@@ -15,7 +15,7 @@ export interface Props {
   datasource: CloudMonitoringDatasource;
 }
 
-export const Selector: React.FC<Props> = ({ refId, query, templateVariableOptions, onChange, datasource }) => {
+export const Selector = ({ refId, query, templateVariableOptions, onChange, datasource }: Props) => {
   return (
     <EditorField label="Selector" htmlFor={`${refId}-slo-selector`}>
       <Select
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Service.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Service.tsx
index c592e6dd412..8c4a0dfa99a 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Service.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Service.tsx
@@ -14,7 +14,7 @@ export interface Props {
   datasource: CloudMonitoringDatasource;
 }
 
-export const Service: React.FC<Props> = ({ refId, query, templateVariableOptions, onChange, datasource }) => {
+export const Service = ({ refId, query, templateVariableOptions, onChange, datasource }: Props) => {
   const [services, setServices] = useState<Array<SelectableValue<string>>>([]);
   const { projectName } = query;
 
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/SLO/SLO.tsx b/public/app/plugins/datasource/cloud-monitoring/components/SLO/SLO.tsx
index bdf16170ba5..16aacd681e0 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/SLO/SLO.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/SLO/SLO.tsx
@@ -16,7 +16,7 @@ export interface Props {
   datasource: CloudMonitoringDatasource;
 }
 
-export const SLO: React.FC<Props> = ({ refId, query, templateVariableOptions, onChange, datasource }) => {
+export const SLO = ({ refId, query, templateVariableOptions, onChange, datasource }: Props) => {
   const [slos, setSLOs] = useState<Array<SelectableValue<string>>>([]);
   const { projectName, serviceId } = query;
 
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/SLO/Selector.tsx b/public/app/plugins/datasource/cloud-monitoring/components/SLO/Selector.tsx
index ed61bdea948..bc9f812b84a 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/SLO/Selector.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/SLO/Selector.tsx
@@ -16,7 +16,7 @@ export interface Props {
   datasource: CloudMonitoringDatasource;
 }
 
-export const Selector: React.FC<Props> = ({ refId, query, templateVariableOptions, onChange, datasource }) => {
+export const Selector = ({ refId, query, templateVariableOptions, onChange, datasource }: Props) => {
   return (
     <QueryEditorRow label="Selector" htmlFor={`${refId}-slo-selector`}>
       <Select
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/SLO/Service.tsx b/public/app/plugins/datasource/cloud-monitoring/components/SLO/Service.tsx
index a759874da2e..a841f992328 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/SLO/Service.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/SLO/Service.tsx
@@ -16,7 +16,7 @@ export interface Props {
   datasource: CloudMonitoringDatasource;
 }
 
-export const Service: React.FC<Props> = ({ refId, query, templateVariableOptions, onChange, datasource }) => {
+export const Service = ({ refId, query, templateVariableOptions, onChange, datasource }: Props) => {
   const [services, setServices] = useState<Array<SelectableValue<string>>>([]);
   const { projectName } = query;
 
diff --git a/public/app/plugins/datasource/cloudwatch/components/Dimensions/Dimensions.tsx b/public/app/plugins/datasource/cloudwatch/components/Dimensions/Dimensions.tsx
index f004c8bde1b..8ee4e503532 100644
--- a/public/app/plugins/datasource/cloudwatch/components/Dimensions/Dimensions.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/Dimensions/Dimensions.tsx
@@ -45,13 +45,7 @@ const filterConditionsToDimensions = (filters: DimensionFilterCondition[]) => {
   }, {});
 };
 
-export const Dimensions: React.FC<Props> = ({
-  metricStat,
-  datasource,
-  dimensionKeys,
-  disableExpressions,
-  onChange,
-}) => {
+export const Dimensions = ({ metricStat, datasource, dimensionKeys, disableExpressions, onChange }: Props) => {
   const dimensionFilters = useMemo(() => dimensionsToFilterConditions(metricStat.dimensions), [metricStat.dimensions]);
   const [items, setItems] = useState<DimensionFilterCondition[]>(dimensionFilters);
   const onDimensionsChange = (newItems: Array<Partial<DimensionFilterCondition>>) => {
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.tsx
index e768c2b4cb7..3cf327d0dab 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.tsx
@@ -32,7 +32,7 @@ const filterConditionsToMultiFilters = (filters: MultiFilterCondition[]) => {
   return res;
 };
 
-export const MultiFilter: React.FC<Props> = ({ filters, onChange, keyPlaceholder }) => {
+export const MultiFilter = ({ filters, onChange, keyPlaceholder }: Props) => {
   const [items, setItems] = useState<MultiFilterCondition[]>([]);
   useEffect(() => setItems(filters ? multiFiltersToFilterConditions(filters) : []), [filters]);
   const onFiltersChange = (newItems: Array<Partial<MultiFilterCondition>>) => {
diff --git a/public/app/plugins/datasource/graphite/components/GraphiteVariableEditor.tsx b/public/app/plugins/datasource/graphite/components/GraphiteVariableEditor.tsx
index 03203d3c74e..96300703a56 100644
--- a/public/app/plugins/datasource/graphite/components/GraphiteVariableEditor.tsx
+++ b/public/app/plugins/datasource/graphite/components/GraphiteVariableEditor.tsx
@@ -17,7 +17,7 @@ const GRAPHITE_QUERY_VARIABLE_TYPE_OPTIONS = [
   { label: 'Metric Name Query', value: GraphiteQueryType.MetricName },
 ];
 
-export const GraphiteVariableEditor: React.FC<Props> = (props) => {
+export const GraphiteVariableEditor = (props: Props) => {
   const { query, onChange } = props;
   const [value, setValue] = useState(convertToGraphiteQueryObject(query));
 
diff --git a/public/app/plugins/datasource/jaeger/components/ConfigEditor.tsx b/public/app/plugins/datasource/jaeger/components/ConfigEditor.tsx
index a4ba733a55a..2ad3f9865f7 100644
--- a/public/app/plugins/datasource/jaeger/components/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/jaeger/components/ConfigEditor.tsx
@@ -10,7 +10,7 @@ import { TraceToMetricsSettings } from 'app/core/components/TraceToMetrics/Trace
 
 export type Props = DataSourcePluginOptionsEditorProps;
 
-export const ConfigEditor: React.FC<Props> = ({ options, onOptionsChange }) => {
+export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
   return (
     <>
       <DataSourceHttpSettings
diff --git a/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
index d9662af5828..10b85be9e49 100644
--- a/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
@@ -14,7 +14,7 @@ import { ServiceGraphSettings } from './ServiceGraphSettings';
 
 export type Props = DataSourcePluginOptionsEditorProps;
 
-export const ConfigEditor: React.FC<Props> = ({ options, onOptionsChange }) => {
+export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
   return (
     <>
       <DataSourceHttpSettings
diff --git a/public/app/plugins/datasource/zipkin/ConfigEditor.tsx b/public/app/plugins/datasource/zipkin/ConfigEditor.tsx
index c864748c688..b6fc6fe8255 100644
--- a/public/app/plugins/datasource/zipkin/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/zipkin/ConfigEditor.tsx
@@ -10,7 +10,7 @@ import { TraceToMetricsSettings } from 'app/core/components/TraceToMetrics/Trace
 
 export type Props = DataSourcePluginOptionsEditorProps;
 
-export const ConfigEditor: React.FC<Props> = ({ options, onOptionsChange }) => {
+export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
   return (
     <>
       <DataSourceHttpSettings
diff --git a/public/app/plugins/panel/histogram/HistogramPanel.tsx b/public/app/plugins/panel/histogram/HistogramPanel.tsx
index 4f19272b53c..81513102dd6 100644
--- a/public/app/plugins/panel/histogram/HistogramPanel.tsx
+++ b/public/app/plugins/panel/histogram/HistogramPanel.tsx
@@ -9,7 +9,7 @@ import { PanelOptions } from './models.gen';
 
 type Props = PanelProps<PanelOptions>;
 
-export const HistogramPanel: React.FC<Props> = ({ data, options, width, height }) => {
+export const HistogramPanel = ({ data, options, width, height }: Props) => {
   const theme = useTheme2();
 
   const histogram = useMemo(() => {