diff --git a/packages/grafana-flamegraph/src/FlameGraph/rendering.ts b/packages/grafana-flamegraph/src/FlameGraph/rendering.ts
index 96b25b93abb..0d649a24eb3 100644
--- a/packages/grafana-flamegraph/src/FlameGraph/rendering.ts
+++ b/packages/grafana-flamegraph/src/FlameGraph/rendering.ts
@@ -22,7 +22,7 @@ import { getBarColorByDiff, getBarColorByPackage, getBarColorByValue } from './c
 import { CollapseConfig, CollapsedMap, FlameGraphDataContainer, LevelItem } from './dataTransform';
 
 type RenderOptions = {
-  canvasRef: RefObject<HTMLCanvasElement>;
+  canvasRef: RefObject<HTMLCanvasElement | null>;
   data: FlameGraphDataContainer;
   root: LevelItem;
   direction: 'children' | 'parents';
@@ -373,7 +373,7 @@ function useColorFunction(
   );
 }
 
-function useSetupCanvas(canvasRef: RefObject<HTMLCanvasElement>, wrapperWidth: number, numberOfLevels: number) {
+function useSetupCanvas(canvasRef: RefObject<HTMLCanvasElement | null>, wrapperWidth: number, numberOfLevels: number) {
   const [ctx, setCtx] = useState<CanvasRenderingContext2D>();
 
   useEffect(() => {
diff --git a/packages/grafana-ui/src/components/Combobox/ComboboxList.tsx b/packages/grafana-ui/src/components/Combobox/ComboboxList.tsx
index bc738338204..45d92c54f94 100644
--- a/packages/grafana-ui/src/components/Combobox/ComboboxList.tsx
+++ b/packages/grafana-ui/src/components/Combobox/ComboboxList.tsx
@@ -18,7 +18,7 @@ interface ComboboxListProps<T extends string | number> {
   options: Array<ComboboxOption<T>>;
   highlightedIndex: number | null;
   selectedItems?: Array<ComboboxOption<T>>;
-  scrollRef: React.RefObject<HTMLDivElement>;
+  scrollRef: React.RefObject<HTMLDivElement | null>;
   getItemProps: UseComboboxPropGetters<ComboboxOption<T>>['getItemProps'];
   enableAllOption?: boolean;
   isMultiSelect?: boolean;
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
index cd5c7dfbd68..e812bbcd6a9 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
@@ -10,7 +10,7 @@ import { useStyles2 } from '../../themes/ThemeContext';
 import { List } from '../List/List';
 
 interface DataLinkSuggestionsProps {
-  activeRef?: React.RefObject<HTMLDivElement>;
+  activeRef?: React.RefObject<HTMLDivElement | null>;
   suggestions: VariableSuggestion[];
   activeIndex: number;
   onSuggestionSelect: (suggestion: VariableSuggestion) => void;
diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/hooks.ts b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/hooks.ts
index 96c190c4494..2c346a0bd0e 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/hooks.ts
+++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/hooks.ts
@@ -7,7 +7,7 @@ const CAUGHT_KEYS = ['ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter', 'Tab'];
 
 /** @internal */
 export interface UseListFocusProps {
-  localRef: RefObject<HTMLUListElement>;
+  localRef: RefObject<HTMLUListElement | null>;
   options: TimeOption[];
 }
 
diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx
index 8c050c109c0..133826864ec 100644
--- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx
+++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx
@@ -168,7 +168,9 @@ export class Gauge extends PureComponent<Props> {
     const gaugeElement = (
       <div
         style={{ height: `${autoProps.gaugeHeight}px`, width: gaugeWidth }}
-        ref={(element) => (this.canvasElement = element)}
+        ref={(element) => {
+          this.canvasElement = element;
+        }}
       />
     );
 
diff --git a/packages/grafana-ui/src/components/Menu/hooks.ts b/packages/grafana-ui/src/components/Menu/hooks.ts
index b6111f9804f..b997bef4556 100644
--- a/packages/grafana-ui/src/components/Menu/hooks.ts
+++ b/packages/grafana-ui/src/components/Menu/hooks.ts
@@ -6,7 +6,7 @@ const UNFOCUSED = -1;
 
 /** @internal */
 export interface UseMenuFocusProps {
-  localRef: RefObject<HTMLDivElement>;
+  localRef: RefObject<HTMLDivElement | null>;
   isMenuOpen?: boolean;
   close?: () => void;
   onOpen?: (focusOnItem: (itemId: number) => void) => void;
diff --git a/packages/grafana-ui/src/components/QueryField/QueryField.tsx b/packages/grafana-ui/src/components/QueryField/QueryField.tsx
index 053bddb3ad3..63c696da7bd 100644
--- a/packages/grafana-ui/src/components/QueryField/QueryField.tsx
+++ b/packages/grafana-ui/src/components/QueryField/QueryField.tsx
@@ -211,7 +211,9 @@ export class UnThemedQueryField extends PureComponent<QueryFieldProps, QueryFiel
       <div className={cx(wrapperClassName, styles.wrapper)}>
         <div className="slate-query-field" data-testid={selectors.components.QueryField.container}>
           <Editor
-            ref={(editor) => (this.editor = editor!)}
+            ref={(editor) => {
+              this.editor = editor;
+            }}
             schema={SCHEMA}
             autoCorrect={false}
             readOnly={this.props.disabled}
diff --git a/packages/grafana-ui/src/components/Table/TableNG/components/TableCellTooltip.tsx b/packages/grafana-ui/src/components/Table/TableNG/components/TableCellTooltip.tsx
index 660f85397f6..320194fdc68 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/components/TableCellTooltip.tsx
+++ b/packages/grafana-ui/src/components/Table/TableNG/components/TableCellTooltip.tsx
@@ -20,7 +20,7 @@ export interface TableCellTooltipProps {
   field: Field;
   getActions: (field: Field, rowIdx: number) => ActionModel[];
   getTextColorForBackground: (bgColor: string) => string;
-  gridRef: RefObject<DataGridHandle>;
+  gridRef: RefObject<DataGridHandle | null>;
   height: number;
   placement?: TableCellTooltipPlacement;
   renderer: TableCellRenderer;
diff --git a/packages/grafana-ui/src/components/Table/TableNG/hooks.ts b/packages/grafana-ui/src/components/Table/TableNG/hooks.ts
index 83c320dacbf..2a7a096e639 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/hooks.ts
+++ b/packages/grafana-ui/src/components/Table/TableNG/hooks.ts
@@ -463,7 +463,7 @@ export function useColumnResize(
   return dataGridResizeHandler;
 }
 
-export function useScrollbarWidth(ref: RefObject<DataGridHandle>, height: number) {
+export function useScrollbarWidth(ref: RefObject<DataGridHandle | null>, height: number) {
   const [scrollbarWidth, setScrollbarWidth] = useState(0);
 
   useLayoutEffect(() => {
diff --git a/packages/grafana-ui/src/components/Table/TableRT/RowsList.tsx b/packages/grafana-ui/src/components/Table/TableRT/RowsList.tsx
index 251cfddaefd..ab3f3a1a707 100644
--- a/packages/grafana-ui/src/components/Table/TableRT/RowsList.tsx
+++ b/packages/grafana-ui/src/components/Table/TableRT/RowsList.tsx
@@ -49,7 +49,7 @@ interface RowsListProps {
   listHeight: number;
   width: number;
   cellHeight?: TableCellHeight;
-  listRef: React.RefObject<VariableSizeList>;
+  listRef: React.RefObject<VariableSizeList | null>;
   tableState: TableState;
   tableStyles: TableStyles;
   nestedDataField?: Field;
diff --git a/packages/grafana-ui/src/components/Table/TableRT/Table.tsx b/packages/grafana-ui/src/components/Table/TableRT/Table.tsx
index ea909d4642f..2361644b476 100644
--- a/packages/grafana-ui/src/components/Table/TableRT/Table.tsx
+++ b/packages/grafana-ui/src/components/Table/TableRT/Table.tsx
@@ -135,7 +135,7 @@ export const Table = memo((props: Props) => {
   // `useTableStateReducer`, which is needed to construct options for `useTable` (the hook that returns
   // `toggleAllRowsExpanded`), and if we used a variable, that variable would be undefined at the time
   // we initialize `useTableStateReducer`.
-  const toggleAllRowsExpandedRef = useRef<(value?: boolean) => void>();
+  const toggleAllRowsExpandedRef = useRef<(value?: boolean) => void>(null);
 
   // Internal react table state reducer
   const stateReducer = useTableStateReducer({
diff --git a/packages/grafana-ui/src/components/Table/hooks.ts b/packages/grafana-ui/src/components/Table/hooks.ts
index bb9b6b13d0c..4ede3fbc975 100644
--- a/packages/grafana-ui/src/components/Table/hooks.ts
+++ b/packages/grafana-ui/src/components/Table/hooks.ts
@@ -43,7 +43,7 @@ export function useFixScrollbarContainer(
  */
 export function useResetVariableListSizeCache(
   extendedState: GrafanaTableState,
-  listRef: React.RefObject<VariableSizeList>,
+  listRef: React.RefObject<VariableSizeList | null>,
   data: DataFrame,
   hasUniqueId: boolean
 ) {
diff --git a/packages/grafana-ui/src/components/uPlot/geometries/EventsCanvas.tsx b/packages/grafana-ui/src/components/uPlot/geometries/EventsCanvas.tsx
index f4f2e71b7ae..0c8cc48564b 100644
--- a/packages/grafana-ui/src/components/uPlot/geometries/EventsCanvas.tsx
+++ b/packages/grafana-ui/src/components/uPlot/geometries/EventsCanvas.tsx
@@ -19,7 +19,7 @@ interface EventsCanvasProps {
 }
 
 export function EventsCanvas({ id, events, renderEventMarker, mapEventToXYCoords, config }: EventsCanvasProps) {
-  const plotInstance = useRef<uPlot>();
+  const plotInstance = useRef<uPlot>(null);
   // render token required to re-render annotation markers. Rendering lines happens in uPlot and the props do not change
   // so we need to force the re-render when the draw hook was performed by uPlot
   const [renderToken, setRenderToken] = useState(0);
diff --git a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx
index 606839aacad..8fc7555088b 100644
--- a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx
+++ b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin2.tsx
@@ -140,7 +140,7 @@ export const TooltipPlugin2 = ({
 
   const [{ plot, isHovering, isPinned, contents, style, dismiss }, setState] = useReducer(mergeState, null, initState);
 
-  const sizeRef = useRef<TooltipContainerSize>();
+  const sizeRef = useRef<TooltipContainerSize>(null);
   const styles = useStyles2(getStyles, maxWidth);
 
   const renderRef = useRef(render);
diff --git a/packages/grafana-ui/src/graveyard/Graph/Graph.tsx b/packages/grafana-ui/src/graveyard/Graph/Graph.tsx
index 759e041decd..e47ed7fcfaa 100644
--- a/packages/grafana-ui/src/graveyard/Graph/Graph.tsx
+++ b/packages/grafana-ui/src/graveyard/Graph/Graph.tsx
@@ -384,7 +384,9 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
       <div className="graph-panel" aria-label={ariaLabel}>
         <div
           className="graph-panel__chart"
-          ref={(e) => (this.element = e)}
+          ref={(e) => {
+            this.element = e;
+          }}
           style={{ height, width }}
           onMouseLeave={() => {
             this.setState({ isTooltipVisible: false });
diff --git a/packages/grafana-ui/src/graveyard/GraphNG/GraphNG.tsx b/packages/grafana-ui/src/graveyard/GraphNG/GraphNG.tsx
index c7e87d55ba5..16a18f5c33c 100644
--- a/packages/grafana-ui/src/graveyard/GraphNG/GraphNG.tsx
+++ b/packages/grafana-ui/src/graveyard/GraphNG/GraphNG.tsx
@@ -96,7 +96,7 @@ export interface GraphNGState {
 export class GraphNG extends Component<GraphNGProps, GraphNGState> {
   static contextType = PanelContextRoot;
   panelContext: PanelContext = {} as PanelContext;
-  private plotInstance: React.RefObject<uPlot>;
+  private plotInstance: React.RefObject<uPlot | null>;
 
   private subscription = new Subscription();
 
diff --git a/packages/grafana-ui/src/graveyard/uPlot/plugins/TooltipPlugin.tsx b/packages/grafana-ui/src/graveyard/uPlot/plugins/TooltipPlugin.tsx
index 69bc0e3ec8f..518cd12c27f 100644
--- a/packages/grafana-ui/src/graveyard/uPlot/plugins/TooltipPlugin.tsx
+++ b/packages/grafana-ui/src/graveyard/uPlot/plugins/TooltipPlugin.tsx
@@ -53,7 +53,7 @@ export const TooltipPlugin = ({
   renderTooltip,
   ...otherProps
 }: TooltipPluginProps) => {
-  const plotInstance = useRef<uPlot>();
+  const plotInstance = useRef<uPlot>(null);
   const theme = useTheme2();
   const [focusedSeriesIdx, setFocusedSeriesIdx] = useState<number | null>(null);
   const [focusedPointIdx, setFocusedPointIdx] = useState<number | null>(null);
diff --git a/packages/grafana-ui/src/utils/useDelayedSwitch.ts b/packages/grafana-ui/src/utils/useDelayedSwitch.ts
index 46c865bd326..cd5392ee814 100644
--- a/packages/grafana-ui/src/utils/useDelayedSwitch.ts
+++ b/packages/grafana-ui/src/utils/useDelayedSwitch.ts
@@ -19,7 +19,7 @@ export function useDelayedSwitch(value: boolean, options: DelayOptions = {}): bo
   const { duration = 250, delay = 250 } = options;
 
   const [delayedValue, setDelayedValue] = useState(value);
-  const onStartTime = useRef<Date | undefined>();
+  const onStartTime = useRef<Date | undefined>(undefined);
 
   useEffect(() => {
     let timeout: ReturnType<typeof setTimeout> | undefined;
diff --git a/public/app/core/components/GraphNG/GraphNG.tsx b/public/app/core/components/GraphNG/GraphNG.tsx
index 7094c137501..5a25edbcafe 100644
--- a/public/app/core/components/GraphNG/GraphNG.tsx
+++ b/public/app/core/components/GraphNG/GraphNG.tsx
@@ -109,7 +109,7 @@ const defaultMatchers = {
  * "Time as X" core component, expects ascending x
  */
 export class GraphNG extends Component<GraphNGProps, GraphNGState> {
-  private plotInstance: React.RefObject<uPlot>;
+  private plotInstance: React.RefObject<uPlot | null>;
 
   constructor(props: GraphNGProps) {
     super(props);
diff --git a/public/app/features/alerting/unified/hooks/useAsync.tsx b/public/app/features/alerting/unified/hooks/useAsync.tsx
index 66790ed348b..8b08ecd70a1 100644
--- a/public/app/features/alerting/unified/hooks/useAsync.tsx
+++ b/public/app/features/alerting/unified/hooks/useAsync.tsx
@@ -84,8 +84,8 @@ export function useAsync<Result, Args extends unknown[] = unknown[]>(
     error: undefined,
     result: initialValue,
   });
-  const promiseRef = useRef<Promise<Result>>();
-  const argsRef = useRef<Args>();
+  const promiseRef = useRef<Promise<Result>>(undefined);
+  const argsRef = useRef<Args>(undefined);
 
   const methods = useSyncedRef({
     execute(...params: Args) {
diff --git a/public/app/features/alerting/unified/hooks/usePrometheusConsistencyCheck.ts b/public/app/features/alerting/unified/hooks/usePrometheusConsistencyCheck.ts
index 618b661b2b5..6405ced4634 100644
--- a/public/app/features/alerting/unified/hooks/usePrometheusConsistencyCheck.ts
+++ b/public/app/features/alerting/unified/hooks/usePrometheusConsistencyCheck.ts
@@ -155,8 +155,8 @@ export function useRuleGroupConsistencyCheck() {
   const { isGroupInSync } = useRuleGroupIsInSync();
   const [groupConsistent, setGroupConsistent] = useState<boolean | undefined>();
 
-  const apiCheckInterval = useRef<ReturnType<typeof setTimeout> | undefined>();
-  const timeoutInterval = useRef<ReturnType<typeof setTimeout> | undefined>();
+  const apiCheckInterval = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const timeoutInterval = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
   useEffect(() => {
     return () => {
@@ -245,8 +245,8 @@ export function useRuleGroupConsistencyCheck() {
 export function usePrometheusConsistencyCheck() {
   const { matchingPromRuleExists } = useMatchingPromRuleExists();
 
-  const removalConsistencyInterval = useRef<number | undefined>();
-  const creationConsistencyInterval = useRef<number | undefined>();
+  const removalConsistencyInterval = useRef<number | undefined>(undefined);
+  const creationConsistencyInterval = useRef<number | undefined>(undefined);
 
   useEffect(() => {
     return () => {
diff --git a/public/app/features/commandPalette/actions/scopeActions.tsx b/public/app/features/commandPalette/actions/scopeActions.tsx
index e85d136d2f6..34a552f3e50 100644
--- a/public/app/features/commandPalette/actions/scopeActions.tsx
+++ b/public/app/features/commandPalette/actions/scopeActions.tsx
@@ -141,7 +141,7 @@ function useScopesRow(onApply: () => void) {
 function useGlobalScopesSearch(searchQuery: string, parentId?: string | null) {
   const { selectScope, searchAllNodes, getScopeNodes } = useScopeServicesState();
   const [actions, setActions] = useState<CommandPaletteAction[] | undefined>(undefined);
-  const searchQueryRef = useRef<string>();
+  const searchQueryRef = useRef<string>(undefined);
 
   useEffect(() => {
     if ((!parentId || parentId === 'scopes') && searchQuery && config.featureToggles.scopeSearchAllLevels) {
diff --git a/public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx b/public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx
index 4d90a871440..7f083592fee 100644
--- a/public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx
+++ b/public/app/features/dashboard-scene/saving/SaveDashboardAsForm.tsx
@@ -49,7 +49,7 @@ export function SaveDashboardAsForm({ dashboard, changeInfo }: Props) {
 
   const [contentSent, setContentSent] = useState<{ title?: string; folderUid?: string }>({});
 
-  const validationTimeoutRef = useRef<NodeJS.Timeout>();
+  const validationTimeoutRef = useRef<NodeJS.Timeout>(null);
 
   // Validate title on form mount to catch invalid default values
   useEffect(() => {
@@ -59,14 +59,18 @@ export function SaveDashboardAsForm({ dashboard, changeInfo }: Props) {
   // Cleanup timeout on unmount
   useEffect(() => {
     return () => {
-      clearTimeout(validationTimeoutRef.current);
+      if (validationTimeoutRef.current) {
+        clearTimeout(validationTimeoutRef.current);
+      }
     };
   }, []);
 
   const handleTitleChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
       setValue('title', e.target.value, { shouldDirty: true });
-      clearTimeout(validationTimeoutRef.current);
+      if (validationTimeoutRef.current) {
+        clearTimeout(validationTimeoutRef.current);
+      }
       validationTimeoutRef.current = setTimeout(() => {
         trigger('title');
       }, 400);
@@ -75,7 +79,9 @@ export function SaveDashboardAsForm({ dashboard, changeInfo }: Props) {
   );
 
   const onSave = async (overwrite: boolean) => {
-    clearTimeout(validationTimeoutRef.current);
+    if (validationTimeoutRef.current) {
+      clearTimeout(validationTimeoutRef.current);
+    }
 
     const isTitleValid = await trigger('title');
 
diff --git a/public/app/features/dashboard-scene/scene/layouts-shared/scrollCanvasElementIntoView.ts b/public/app/features/dashboard-scene/scene/layouts-shared/scrollCanvasElementIntoView.ts
index e87b7e269f0..aaad6d0e191 100644
--- a/public/app/features/dashboard-scene/scene/layouts-shared/scrollCanvasElementIntoView.ts
+++ b/public/app/features/dashboard-scene/scene/layouts-shared/scrollCanvasElementIntoView.ts
@@ -8,7 +8,7 @@ import { TabsLayoutManager } from '../layout-tabs/TabsLayoutManager';
  * Will scroll element into view. If element is not connected yet, it will try to expand rows
  * and switch tabs to make it visible.
  */
-export function scrollCanvasElementIntoView(sceneObject: SceneObject, ref: React.RefObject<HTMLElement>) {
+export function scrollCanvasElementIntoView(sceneObject: SceneObject, ref: React.RefObject<HTMLElement | null>) {
   if (ref.current?.isConnected) {
     scrollIntoView(ref.current);
     return;
diff --git a/public/app/features/dashboard/components/PanelEditor/usePanelLatestData.ts b/public/app/features/dashboard/components/PanelEditor/usePanelLatestData.ts
index 2a5a47e574e..3f1c84ee23b 100644
--- a/public/app/features/dashboard/components/PanelEditor/usePanelLatestData.ts
+++ b/public/app/features/dashboard/components/PanelEditor/usePanelLatestData.ts
@@ -21,7 +21,7 @@ export const usePanelLatestData = (
   options: GetDataOptions,
   checkSchema?: boolean
 ): UsePanelLatestData => {
-  const querySubscription = useRef<Unsubscribable>();
+  const querySubscription = useRef<Unsubscribable>(null);
   const [latestData, setLatestData] = useState<PanelData>();
 
   useEffect(() => {
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
index 1593c6162b7..e62e575d3a0 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
@@ -61,7 +61,7 @@ interface State {
 
 class UnThemedTransformationsEditor extends React.PureComponent<TransformationsEditorProps, State> {
   subscription?: Unsubscribable;
-  ref: RefObject<HTMLDivElement>;
+  ref: RefObject<HTMLDivElement | null>;
 
   constructor(props: TransformationsEditorProps) {
     super(props);
diff --git a/public/app/features/datasources/hooks.ts b/public/app/features/datasources/hooks.ts
index 886a606f90f..ed6d7fba842 100644
--- a/public/app/features/datasources/hooks.ts
+++ b/public/app/features/datasources/hooks.ts
@@ -64,7 +64,7 @@ export function useDatasource(dataSource: string | DataSourceRef | DataSourceIns
 
 export interface KeybaordNavigatableListProps {
   keyboardEvents?: Observable<React.KeyboardEvent>;
-  containerRef: React.RefObject<HTMLElement>;
+  containerRef: React.RefObject<HTMLElement | null>;
 }
 
 /**
diff --git a/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.tsx b/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.tsx
index bc797c07477..7751d639d80 100644
--- a/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.tsx
@@ -25,7 +25,7 @@ interface State {
 }
 
 export class ThresholdsEditor extends PureComponent<Props, State> {
-  private latestThresholdInputRef: React.RefObject<HTMLInputElement>;
+  private latestThresholdInputRef: React.RefObject<HTMLInputElement | null>;
 
   constructor(props: Props) {
     super(props);
diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index 79678f4e15a..39c5b09dc6c 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -640,7 +640,9 @@ export class Explore extends PureComponent<Props, ExploreState> {
             )}
             <ScrollContainer
               data-testid={selectors.pages.Explore.General.scrollView}
-              ref={(scrollElement) => (this.scrollElement = scrollElement || undefined)}
+              ref={(scrollElement) => {
+                this.scrollElement = scrollElement || undefined;
+              }}
             >
               <div className={styles.exploreContainer}>
                 {datasourceInstance ? (
diff --git a/public/app/features/explore/ExplorePaneContainer.tsx b/public/app/features/explore/ExplorePaneContainer.tsx
index d6d9831bbc2..d4fb21b1bfd 100644
--- a/public/app/features/explore/ExplorePaneContainer.tsx
+++ b/public/app/features/explore/ExplorePaneContainer.tsx
@@ -74,7 +74,7 @@ export const ExplorePaneContainer = connector(ExplorePaneContainerUnconnected);
 
 function useStopQueries(exploreId: string) {
   const paneSelector = useMemo(() => getExploreItemSelector(exploreId), [exploreId]);
-  const paneRef = useRef<ReturnType<typeof paneSelector>>();
+  const paneRef = useRef<ReturnType<typeof paneSelector>>(null);
   paneRef.current = useSelector(paneSelector);
 
   useEffect(() => {
diff --git a/public/app/features/explore/TraceView/TraceView.tsx b/public/app/features/explore/TraceView/TraceView.tsx
index 9b9a92a1f77..db6ecfbc43a 100644
--- a/public/app/features/explore/TraceView/TraceView.tsx
+++ b/public/app/features/explore/TraceView/TraceView.tsx
@@ -63,7 +63,7 @@ type Props = {
   scrollElementClass?: string;
   traceProp: Trace;
   datasource: DataSourceApi<DataQuery, DataSourceJsonData, {}> | undefined;
-  topOfViewRef?: RefObject<HTMLDivElement>;
+  topOfViewRef?: RefObject<HTMLDivElement | null>;
   createSpanLink?: SpanLinkFunc;
   focusedSpanId?: string;
   createFocusSpanLink?: (traceId: string, spanId: string) => LinkModel<Field>;
diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx
index eda085bc412..e30b744ddd7 100644
--- a/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx
+++ b/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx
@@ -57,7 +57,7 @@ export const SpanFilters = memo((props: SpanFilterProps) => {
   const [focusedSpanIndexForSearch, setFocusedSpanIndexForSearch] = useState(-1);
   const [tagKeys, setTagKeys] = useState<Array<SelectableValue<string>>>();
   const [tagValues, setTagValues] = useState<{ [key: string]: Array<SelectableValue<string>> }>({});
-  const prevTraceIdRef = useRef<string>();
+  const prevTraceIdRef = useRef<string>(null);
 
   const durationRegex = /^\d+(?:\.\d)?\d*(?:ns|us|µs|ms|s|m|h)$/;
 
diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx
index 3c14fb0c43e..dec5587c7c7 100644
--- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx
+++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx
@@ -561,7 +561,7 @@ const CardsContainer = ({
   mainContainerRef,
 }: {
   listOfContentCards: React.ReactNode[];
-  mainContainerRef?: React.RefObject<HTMLDivElement>;
+  mainContainerRef?: React.RefObject<HTMLDivElement | null>;
 }) => {
   const styles = useStyles2(getStyles);
 
diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/index.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/index.tsx
index 5843cdec64e..08e931c768e 100644
--- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/index.tsx
+++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/index.tsx
@@ -197,7 +197,11 @@ export class UnthemedTraceTimelineViewer extends PureComponent<TProps, State> {
     return (
       <div
         className={styles.TraceTimelineViewer}
-        ref={(ref: HTMLDivElement | null) => ref && this.setState({ height: ref.getBoundingClientRect().height })}
+        ref={(ref) => {
+          if (ref) {
+            this.setState({ height: ref.getBoundingClientRect().height });
+          }
+        }}
       >
         <TimelineHeaderRow
           duration={trace.duration}
diff --git a/public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx b/public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx
index 62cb676ec9a..f03cd15f501 100644
--- a/public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx
+++ b/public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx
@@ -43,7 +43,7 @@ export const LibraryPanelsView = ({
     }
   );
   const asyncDispatch = useMemo(() => asyncDispatcher(dispatch), [dispatch]);
-  const abortControllerRef = useRef<AbortController>();
+  const abortControllerRef = useRef<AbortController>(null);
 
   useDebounce(
     () => {
diff --git a/public/app/features/live/LiveConnectionWarning.tsx b/public/app/features/live/LiveConnectionWarning.tsx
index 2f78ebd22db..0ef98428189 100644
--- a/public/app/features/live/LiveConnectionWarning.tsx
+++ b/public/app/features/live/LiveConnectionWarning.tsx
@@ -12,7 +12,7 @@ export interface Props {}
 
 export const LiveConnectionWarning = memo(function LiveConnectionWarning() {
   const [show, setShow] = useState<boolean | undefined>(undefined);
-  const subscriptionRef = useRef<Unsubscribable>();
+  const subscriptionRef = useRef<Unsubscribable>(null);
   const styles = useStyles2(getStyle);
 
   useEffect(() => {
diff --git a/public/app/features/search/hooks/useSearchKeyboardSelection.ts b/public/app/features/search/hooks/useSearchKeyboardSelection.ts
index 87c1d0cc18c..1ded828d799 100644
--- a/public/app/features/search/hooks/useSearchKeyboardSelection.ts
+++ b/public/app/features/search/hooks/useSearchKeyboardSelection.ts
@@ -38,7 +38,7 @@ export function useSearchKeyboardNavigation(
 ): ItemSelection {
   const highlightIndexRef = useRef<ItemSelection>({ x: 0, y: -1 });
   const [highlightIndex, setHighlightIndex] = useState<ItemSelection>({ x: 0, y: -1 });
-  const urlsRef = useRef<Field>();
+  const urlsRef = useRef<Field>(null);
 
   // Clear selection when the search results change
   useEffect(() => {
diff --git a/public/app/features/transformers/suggestionsInput/SuggestionsInput.tsx b/public/app/features/transformers/suggestionsInput/SuggestionsInput.tsx
index 5fad044a2e2..75ed9c522bf 100644
--- a/public/app/features/transformers/suggestionsInput/SuggestionsInput.tsx
+++ b/public/app/features/transformers/suggestionsInput/SuggestionsInput.tsx
@@ -77,7 +77,7 @@ export const SuggestionsInput = ({
   const theme = useTheme2();
   const styles = getStyles(theme, inputHeight);
 
-  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>();
+  const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
 
   useEffect(() => {
     scrollRef.current?.scrollTo(0, scrollTop);
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/code-editors/LogsQLCodeEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/code-editors/LogsQLCodeEditor.tsx
index dec250d42fd..150841e67aa 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/code-editors/LogsQLCodeEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/code-editors/LogsQLCodeEditor.tsx
@@ -20,8 +20,8 @@ interface CodeEditorProps {
 export const LogsQLCodeEditor = (props: CodeEditorProps) => {
   const { query, datasource, onChange } = props;
 
-  const monacoRef = useRef<Monaco>();
-  const disposalRef = useRef<monacoType.IDisposable>();
+  const monacoRef = useRef<Monaco>(null);
+  const disposalRef = useRef<monacoType.IDisposable>(undefined);
 
   const onFocus = useCallback(async () => {
     disposalRef.current = await reRegisterCompletionProvider(
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/code-editors/PPLQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/code-editors/PPLQueryEditor.tsx
index 84ff7e7738c..58100cec530 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/code-editors/PPLQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/code-editors/PPLQueryEditor.tsx
@@ -42,8 +42,8 @@ interface LogsCodeEditorProps {
 export const PPLQueryEditor = (props: LogsCodeEditorProps) => {
   const { query, datasource, onChange } = props;
 
-  const monacoRef = useRef<Monaco>();
-  const disposalRef = useRef<monacoType.IDisposable>();
+  const monacoRef = useRef<Monaco>(null);
+  const disposalRef = useRef<monacoType.IDisposable>(undefined);
 
   const onFocus = useCallback(async () => {
     disposalRef.current = await reRegisterCompletionProvider(
diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/code-editors/SQLCodeEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/code-editors/SQLCodeEditor.tsx
index 59abe051f76..30b64ec9247 100644
--- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/code-editors/SQLCodeEditor.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/code-editors/SQLCodeEditor.tsx
@@ -20,8 +20,8 @@ interface SQLCodeEditorProps {
 export const SQLQueryEditor = (props: SQLCodeEditorProps) => {
   const { query, datasource, onChange } = props;
 
-  const monacoRef = useRef<Monaco>();
-  const disposalRef = useRef<monacoType.IDisposable>();
+  const monacoRef = useRef<Monaco>(null);
+  const disposalRef = useRef<monacoType.IDisposable>(undefined);
 
   const onFocus = useCallback(async () => {
     disposalRef.current = await reRegisterCompletionProvider(
diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/LabelsEditor.tsx b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/LabelsEditor.tsx
index 3a45ab56e39..290987e006c 100644
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/LabelsEditor.tsx
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/LabelsEditor.tsx
@@ -94,7 +94,7 @@ const EDITOR_HEIGHT_OFFSET = 2;
  * Hook that returns function that will set up monaco autocomplete for the label selector
  */
 function useAutocomplete(getLabelValues: (label: string) => Promise<string[]>, labels?: string[]) {
-  const providerRef = useRef<CompletionProvider>();
+  const providerRef = useRef<CompletionProvider>(null);
   if (providerRef.current === undefined) {
     providerRef.current = new CompletionProvider();
   }
diff --git a/public/app/plugins/datasource/loki/components/LokiContextUi.tsx b/public/app/plugins/datasource/loki/components/LokiContextUi.tsx
index 13cc4f9f023..f3d4c1a90e4 100644
--- a/public/app/plugins/datasource/loki/components/LokiContextUi.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiContextUi.tsx
@@ -126,7 +126,7 @@ export function LokiContextUi(props: LokiContextUiProps) {
     window.localStorage.getItem(SHOULD_INCLUDE_PIPELINE_OPERATIONS) === 'true'
   );
 
-  const timerHandle = useRef<number>();
+  const timerHandle = useRef<number>(null);
   const previousInitialized = useRef<boolean>(false);
   const previousContextFilters = useRef<ContextFilter[]>([]);
 
@@ -191,14 +191,18 @@ export function LokiContextUi(props: LokiContextUiProps) {
     }, 1500);
 
     return () => {
-      clearTimeout(timerHandle.current);
+      if (timerHandle.current) {
+        clearTimeout(timerHandle.current);
+      }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [contextFilters, initialized]);
 
   useEffect(() => {
     return () => {
-      clearTimeout(timerHandle.current);
+      if (timerHandle.current) {
+        clearTimeout(timerHandle.current);
+      }
       onClose();
     };
   }, [onClose]);
diff --git a/public/app/plugins/datasource/tempo/traceql/TraceQLEditor.tsx b/public/app/plugins/datasource/tempo/traceql/TraceQLEditor.tsx
index f9b5b3c009b..5517f319f2b 100644
--- a/public/app/plugins/datasource/tempo/traceql/TraceQLEditor.tsx
+++ b/public/app/plugins/datasource/tempo/traceql/TraceQLEditor.tsx
@@ -52,7 +52,7 @@ export function TraceQLEditor(props: Props) {
   const onRunQueryRef = useRef(onRunQuery);
   onRunQueryRef.current = onRunQuery;
 
-  const errorTimeoutId = useRef<number>();
+  const errorTimeoutId = useRef<number>(null);
 
   return (
     <>
@@ -103,7 +103,9 @@ export function TraceQLEditor(props: Props) {
             }
 
             // Remove previous callback if existing, to prevent squiggles from been shown while the user is still typing
-            window.clearTimeout(errorTimeoutId.current);
+            if (errorTimeoutId.current) {
+              window.clearTimeout(errorTimeoutId.current);
+            }
 
             const errorNodes = getErrorNodes(model.getValue());
             const cursorPosition = changeEvent.changes[0].rangeOffset;
diff --git a/public/app/plugins/panel/heatmap/renderHistogram.tsx b/public/app/plugins/panel/heatmap/renderHistogram.tsx
index 14278fcfcc2..e110611c5a8 100644
--- a/public/app/plugins/panel/heatmap/renderHistogram.tsx
+++ b/public/app/plugins/panel/heatmap/renderHistogram.tsx
@@ -1,5 +1,5 @@
 export function renderHistogram(
-  can: React.RefObject<HTMLCanvasElement>,
+  can: React.RefObject<HTMLCanvasElement | null>,
   histCanWidth: number,
   histCanHeight: number,
   xVals: number[],
diff --git a/public/app/plugins/panel/logs/LogsPanel.tsx b/public/app/plugins/panel/logs/LogsPanel.tsx
index 191e503fd90..f877b1bf294 100644
--- a/public/app/plugins/panel/logs/LogsPanel.tsx
+++ b/public/app/plugins/panel/logs/LogsPanel.tsx
@@ -196,7 +196,7 @@ export const LogsPanel = ({
   const dataSourcesMap = useDatasourcesFromTargets(panelData.request?.targets);
   // Prevents the scroll position to change when new data from infinite scrolling is received
   const keepScrollPositionRef = useRef<null | 'infinite-scroll' | 'user'>(null);
-  let closeCallback = useRef<() => void>();
+  let closeCallback = useRef<() => void>(null);
   const { app, eventBus, onAddAdHocFilter } = usePanelContext();
 
   useEffect(() => {
diff --git a/public/app/plugins/panel/nodeGraph/layout.ts b/public/app/plugins/panel/nodeGraph/layout.ts
index d3e01d27c35..308ce9c6c99 100644
--- a/public/app/plugins/panel/nodeGraph/layout.ts
+++ b/public/app/plugins/panel/nodeGraph/layout.ts
@@ -70,7 +70,7 @@ export function useLayout(
   const currentSignature = createDataSignature(rawNodes, rawEdges);
 
   const isMounted = useMountedState();
-  const layoutWorkerCancelRef = useRef<(() => void) | undefined>();
+  const layoutWorkerCancelRef = useRef<(() => void) | undefined>(null);
 
   useUnmount(() => {
     if (layoutWorkerCancelRef.current) {
diff --git a/public/app/plugins/panel/nodeGraph/usePanning.ts b/public/app/plugins/panel/nodeGraph/usePanning.ts
index 41daf7daf12..642c660297f 100644
--- a/public/app/plugins/panel/nodeGraph/usePanning.ts
+++ b/public/app/plugins/panel/nodeGraph/usePanning.ts
@@ -31,7 +31,7 @@ interface Options {
  */
 export function usePanning<T extends Element>({ scale = 1, bounds, focus }: Options = {}): {
   state: State;
-  ref: RefObject<T>;
+  ref: RefObject<T | null>;
 } {
   const isMounted = useMountedState();
   const isPanning = useRef(false);
diff --git a/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin2.tsx b/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin2.tsx
index db45b3167d1..e45a3620069 100644
--- a/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin2.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin2.tsx
@@ -133,7 +133,7 @@ export const AnnotationsPlugin2 = ({
   const newRangeRef = useRef(newRange);
   newRangeRef.current = newRange;
 
-  const xAxisRef = useRef<HTMLDivElement>();
+  const xAxisRef = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
     config.addHook('ready', (u) => {
diff --git a/public/app/plugins/panel/timeseries/plugins/ExemplarsPlugin.tsx b/public/app/plugins/panel/timeseries/plugins/ExemplarsPlugin.tsx
index 50974a7ac94..277f2ecd36d 100644
--- a/public/app/plugins/panel/timeseries/plugins/ExemplarsPlugin.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/ExemplarsPlugin.tsx
@@ -23,7 +23,7 @@ export const ExemplarsPlugin = ({
   maxHeight,
   maxWidth,
 }: ExemplarsPluginProps) => {
-  const plotInstance = useRef<uPlot>();
+  const plotInstance = useRef<uPlot>(null);
 
   const [lockedExemplarRowIndex, setLockedExemplarRowIndex] = useState<number | undefined>();
 
diff --git a/public/app/plugins/panel/timeseries/plugins/OutsideRangePlugin.tsx b/public/app/plugins/panel/timeseries/plugins/OutsideRangePlugin.tsx
index 38d4a677bb4..6272c6ab0da 100644
--- a/public/app/plugins/panel/timeseries/plugins/OutsideRangePlugin.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/OutsideRangePlugin.tsx
@@ -11,7 +11,7 @@ interface ThresholdControlsPluginProps {
 }
 
 export const OutsideRangePlugin = ({ config, onChangeTimeRange }: ThresholdControlsPluginProps) => {
-  const plotInstance = useRef<uPlot>();
+  const plotInstance = useRef<uPlot>(null);
   const [timevalues, setTimeValues] = useState<number[] | TypedArray>([]);
   const [timeRange, setTimeRange] = useState<Scale | undefined>();
 
diff --git a/public/app/plugins/panel/timeseries/plugins/ThresholdControlsPlugin.tsx b/public/app/plugins/panel/timeseries/plugins/ThresholdControlsPlugin.tsx
index ee50545f9f0..c90f8f20c66 100644
--- a/public/app/plugins/panel/timeseries/plugins/ThresholdControlsPlugin.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/ThresholdControlsPlugin.tsx
@@ -16,7 +16,7 @@ interface ThresholdControlsPluginProps {
 }
 
 export const ThresholdControlsPlugin = ({ config, fieldConfig, onThresholdsChange }: ThresholdControlsPluginProps) => {
-  const plotInstance = useRef<uPlot>();
+  const plotInstance = useRef<uPlot>(null);
   const [renderToken, setRenderToken] = useState(0);
 
   useLayoutEffect(() => {