diff --git a/packages/grafana-ui/src/components/Collapse/Collapse.tsx b/packages/grafana-ui/src/components/Collapse/Collapse.tsx
index 9676bba702e..aa2d172f327 100644
--- a/packages/grafana-ui/src/components/Collapse/Collapse.tsx
+++ b/packages/grafana-ui/src/components/Collapse/Collapse.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import React, { FunctionComponent, useState } from 'react';
+import React, { useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
@@ -105,7 +105,7 @@ export interface Props {
   className?: string;
 }
 
-export const ControlledCollapse: FunctionComponent<Props> = ({ isOpen, onToggle, ...otherProps }) => {
+export const ControlledCollapse = ({ isOpen, onToggle, ...otherProps }: React.PropsWithChildren<Props>) => {
   const [open, setOpen] = useState(isOpen);
   return (
     <Collapse
diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx b/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
index 9274774d45d..3606cc3d9a2 100644
--- a/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
@@ -22,7 +22,10 @@ const meta: ComponentMeta<typeof Checkbox> = {
 
 export const Basic: ComponentStory<typeof Checkbox> = (args) => {
   const [checked, setChecked] = useState(false);
-  const onChange = useCallback((e) => setChecked(e.currentTarget.checked), [setChecked]);
+  const onChange = useCallback(
+    (e: React.FormEvent<HTMLInputElement>) => setChecked(e.currentTarget.checked),
+    [setChecked]
+  );
   return (
     <div>
       <Checkbox value={checked} onChange={onChange} {...args} />
diff --git a/packages/grafana-ui/src/components/Forms/Field.story.tsx b/packages/grafana-ui/src/components/Forms/Field.story.tsx
index aaf108766dd..09fb1fb3df5 100644
--- a/packages/grafana-ui/src/components/Forms/Field.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/Field.story.tsx
@@ -47,7 +47,10 @@ Simple.args = {
 
 export const HorizontalLayout: ComponentStory<typeof Field> = (args) => {
   const [checked, setChecked] = useState(false);
-  const onChange = useCallback((e) => setChecked(e.currentTarget.checked), [setChecked]);
+  const onChange = useCallback(
+    (e: React.FormEvent<HTMLInputElement>) => setChecked(e.currentTarget.checked),
+    [setChecked]
+  );
   return (
     <div>
       <Field {...args}>
diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx
index e90e282787e..81345848ed8 100644
--- a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx
@@ -86,7 +86,7 @@ Basic.args = {
 export const AsyncSelect: ComponentStory<typeof AsyncSelectComponent> = (args) => {
   const [, updateArgs] = useArgs();
   const loadAsyncOptions = useCallback(
-    (inputValue) => {
+    (inputValue: string) => {
       return new Promise<Array<SelectableValue<string>>>((resolve) => {
         setTimeout(() => {
           updateArgs({ isLoading: false });
diff --git a/packages/grafana-ui/src/components/Switch/Switch.story.tsx b/packages/grafana-ui/src/components/Switch/Switch.story.tsx
index 9b151495e38..ce8511018de 100644
--- a/packages/grafana-ui/src/components/Switch/Switch.story.tsx
+++ b/packages/grafana-ui/src/components/Switch/Switch.story.tsx
@@ -58,7 +58,10 @@ export const Controlled: ComponentStory<typeof Switch> = (args) => {
 
 export const Uncontrolled: ComponentStory<typeof Switch> = (args) => {
   const [checked, setChecked] = useState(args.value);
-  const onChange = useCallback((e) => setChecked(e.currentTarget.checked), [setChecked]);
+  const onChange = useCallback(
+    (e: React.FormEvent<HTMLInputElement>) => setChecked(e.currentTarget.checked),
+    [setChecked]
+  );
   return <Switch value={checked} disabled={args.disabled} transparent={args.transparent} onChange={onChange} />;
 };
 
diff --git a/packages/grafana-ui/src/types/index.ts b/packages/grafana-ui/src/types/index.ts
index 042ee209e34..9d3f5dd1e14 100644
--- a/packages/grafana-ui/src/types/index.ts
+++ b/packages/grafana-ui/src/types/index.ts
@@ -1,7 +1,6 @@
 export * from './theme';
 export * from './input';
 export * from './completion';
-export * from './storybook';
 export * from './forms';
 export * from './icon';
 export * from './select';
diff --git a/packages/grafana-ui/src/types/storybook.ts b/packages/grafana-ui/src/types/storybook.ts
deleted file mode 100644
index da9e8852dae..00000000000
--- a/packages/grafana-ui/src/types/storybook.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export type Renderable = React.ComponentType | JSX.Element;
-export type RenderFunction = () => Renderable | Renderable[];
diff --git a/packages/grafana-ui/src/utils/storybook/withCenteredStory.tsx b/packages/grafana-ui/src/utils/storybook/withCenteredStory.tsx
index c8937f5c648..7f0e3cbb522 100644
--- a/packages/grafana-ui/src/utils/storybook/withCenteredStory.tsx
+++ b/packages/grafana-ui/src/utils/storybook/withCenteredStory.tsx
@@ -1,7 +1,6 @@
+import { DecoratorFn } from '@storybook/react';
 import React from 'react';
 
-import { RenderFunction } from '../../types';
-
 interface CenteredStoryProps {
   children: React.ReactNode;
   horizontal?: boolean;
@@ -23,13 +22,13 @@ const CenteredStory: React.FunctionComponent<CenteredStoryProps> = ({ horizontal
   );
 };
 
-export const withNotCenteredStory = (story: RenderFunction) => <CenteredStory>{story()}</CenteredStory>;
-export const withCenteredStory = (story: RenderFunction) => (
+export const withNotCenteredStory: DecoratorFn = (story) => <CenteredStory>{story()}</CenteredStory>;
+export const withCenteredStory: DecoratorFn = (story) => (
   <CenteredStory horizontal vertical>
     {story()}
   </CenteredStory>
 );
-export const withHorizontallyCenteredStory = (story: RenderFunction) => (
+export const withHorizontallyCenteredStory: DecoratorFn = (story) => (
   <CenteredStory horizontal>{story()}</CenteredStory>
 );
-export const withVerticallyCenteredStory = (story: RenderFunction) => <CenteredStory vertical>{story()}</CenteredStory>;
+export const withVerticallyCenteredStory: DecoratorFn = (story) => <CenteredStory vertical>{story()}</CenteredStory>;
diff --git a/packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx b/packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx
index a26f6f4f3ce..2a520a3fd40 100644
--- a/packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx
+++ b/packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx
@@ -1,9 +1,9 @@
+import { DecoratorFn } from '@storybook/react';
 import React from 'react';
 
 import { GlobalStyles, useTheme2 } from '../../themes';
-import { RenderFunction } from '../../types';
 
-const PaddedStory: React.FunctionComponent<{}> = ({ children }) => {
+const PaddedStory = ({ children }: React.PropsWithChildren<{}>) => {
   const theme = useTheme2();
 
   return (
@@ -22,4 +22,4 @@ const PaddedStory: React.FunctionComponent<{}> = ({ children }) => {
   );
 };
 
-export const withPaddedStory = (story: RenderFunction) => <PaddedStory>{story()}</PaddedStory>;
+export const withPaddedStory: DecoratorFn = (story) => <PaddedStory>{story()}</PaddedStory>;
diff --git a/packages/grafana-ui/src/utils/storybook/withRightAlignedStory.tsx b/packages/grafana-ui/src/utils/storybook/withRightAlignedStory.tsx
index 9168ad1014b..ac86112e6a9 100644
--- a/packages/grafana-ui/src/utils/storybook/withRightAlignedStory.tsx
+++ b/packages/grafana-ui/src/utils/storybook/withRightAlignedStory.tsx
@@ -1,8 +1,7 @@
+import { DecoratorFn } from '@storybook/react';
 import React from 'react';
 
-import { RenderFunction } from '../../types';
-
-const RightAlignedStory: React.FunctionComponent<{}> = ({ children }) => {
+const RightAlignedStory = ({ children }: React.PropsWithChildren<{}>) => {
   return (
     <div
       style={{
@@ -18,4 +17,4 @@ const RightAlignedStory: React.FunctionComponent<{}> = ({ children }) => {
   );
 };
 
-export const withRightAlignedStory = (story: RenderFunction) => <RightAlignedStory>{story()}</RightAlignedStory>;
+export const withRightAlignedStory: DecoratorFn = (story) => <RightAlignedStory>{story()}</RightAlignedStory>;
diff --git a/packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx b/packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx
index ea97ae9472b..baed4477e01 100644
--- a/packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx
+++ b/packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx
@@ -1,9 +1,7 @@
 import { css, cx } from '@emotion/css';
-import { StoryContext } from '@storybook/react';
+import { DecoratorFn } from '@storybook/react';
 import React from 'react';
 
-import { RenderFunction } from '../../types';
-
 interface Props {
   width?: number;
   height?: number;
@@ -45,7 +43,7 @@ const StoryContainer = ({ width, height, showBoundaries, children }: React.Props
   );
 };
 
-export const withStoryContainer = (story: RenderFunction, context: StoryContext) => {
+export const withStoryContainer: DecoratorFn = (story, context) => {
   return (
     <StoryContainer
       width={context.args.containerWidth}
diff --git a/packages/grafana-ui/src/utils/storybook/withTheme.tsx b/packages/grafana-ui/src/utils/storybook/withTheme.tsx
index da1f660e906..96fbee5054e 100644
--- a/packages/grafana-ui/src/utils/storybook/withTheme.tsx
+++ b/packages/grafana-ui/src/utils/storybook/withTheme.tsx
@@ -1,3 +1,4 @@
+import { DecoratorFn } from '@storybook/react';
 import React from 'react';
 import { useDarkMode } from 'storybook-dark-mode';
 
@@ -5,13 +6,12 @@ import { createTheme, GrafanaTheme2 } from '@grafana/data';
 
 import { GlobalStyles } from '../../themes/GlobalStyles/GlobalStyles';
 import { ThemeContext } from '../../themes/ThemeContext';
-import { RenderFunction } from '../../types';
 
 type SassThemeChangeHandler = (theme: GrafanaTheme2) => void;
-const ThemeableStory: React.FunctionComponent<{ handleSassThemeChange: SassThemeChangeHandler }> = ({
+const ThemeableStory = ({
   children,
   handleSassThemeChange,
-}) => {
+}: React.PropsWithChildren<{ handleSassThemeChange: SassThemeChangeHandler }>) => {
   const theme = createTheme({ colors: { mode: useDarkMode() ? 'dark' : 'light' } });
 
   handleSassThemeChange(theme);
@@ -49,6 +49,8 @@ export const renderComponentWithTheme = (component: React.ComponentType<any>, pr
   );
 };
 
-// eslint-disable-next-line react/display-name
-export const withTheme = (handleSassThemeChange: SassThemeChangeHandler) => (story: RenderFunction) =>
-  <ThemeableStory handleSassThemeChange={handleSassThemeChange}>{story()}</ThemeableStory>;
+export const withTheme =
+  (handleSassThemeChange: SassThemeChangeHandler): DecoratorFn =>
+  // eslint-disable-next-line react/display-name
+  (story) =>
+    <ThemeableStory handleSassThemeChange={handleSassThemeChange}>{story()}</ThemeableStory>;