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/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/Input/utils.ts b/packages/grafana-ui/src/components/Input/utils.ts
index b21aee2d848..91dcedb90ba 100644
--- a/packages/grafana-ui/src/components/Input/utils.ts
+++ b/packages/grafana-ui/src/components/Input/utils.ts
@@ -1,7 +1,7 @@
 import { RefObject, useRef } from 'react';
 
-export function useFocus(): [RefObject<HTMLInputElement>, () => void] {
-  const ref = useRef<HTMLInputElement>(null);
+export function useFocus(): [RefObject<HTMLInputElement | null>, () => void] {
+  const ref = useRef<HTMLInputElement | null>(null);
   const setFocus = () => {
     ref.current && ref.current.focus();
   };
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/ScrollContainer/ScrollContainer.tsx b/packages/grafana-ui/src/components/ScrollContainer/ScrollContainer.tsx
index 60da6f97a8d..2f87771ce62 100644
--- a/packages/grafana-ui/src/components/ScrollContainer/ScrollContainer.tsx
+++ b/packages/grafana-ui/src/components/ScrollContainer/ScrollContainer.tsx
@@ -22,7 +22,7 @@ interface Props extends Omit<BoxProps, 'display' | 'direction' | 'element' | 'fl
  *
  * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-scrollcontainer--docs
  */
-export const ScrollContainer = forwardRef<HTMLDivElement, PropsWithChildren<Props>>(
+export const ScrollContainer = forwardRef<HTMLDivElement | null, PropsWithChildren<Props>>(
   (
     {
       children,
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/Table.tsx b/packages/grafana-ui/src/components/Table/TableRT/Table.tsx
index ea909d4642f..1d018699edf 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>(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..eee19a6532b 100644
--- a/packages/grafana-ui/src/components/Table/hooks.ts
+++ b/packages/grafana-ui/src/components/Table/hooks.ts
@@ -14,8 +14,8 @@ import { GrafanaTableState } from './types';
   Select the scrollbar element from the VariableSizeList scope
  */
 export function useFixScrollbarContainer(
-  variableSizeListScrollbarRef: React.RefObject<HTMLDivElement>,
-  tableDivRef: React.RefObject<HTMLDivElement>
+  variableSizeListScrollbarRef: React.RefObject<HTMLDivElement | null>,
+  tableDivRef: React.RefObject<HTMLDivElement | null>
 ) {
   useEffect(() => {
     if (variableSizeListScrollbarRef.current && tableDivRef.current) {
@@ -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..0232e02a6ce 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>(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 138ec2bea42..5a8f993fbdb 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>(null);
   const styles = useStyles2(getStyles, maxWidth);
 
   const renderRef = useRef(render);
diff --git a/packages/grafana-ui/src/graveyard/GraphNG/GraphNG.tsx b/packages/grafana-ui/src/graveyard/GraphNG/GraphNG.tsx
index b5b2aaba1bd..c9e3be2c4cc 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/public/app/core/components/GraphNG/GraphNG.tsx b/public/app/core/components/GraphNG/GraphNG.tsx
index bb4df705772..81917437150 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/dashboard-scene/solo/SoloPanelPageLogo.test.tsx b/public/app/features/dashboard-scene/solo/SoloPanelPageLogo.test.tsx
index bbfe0c5bcdd..c29d78349bb 100644
--- a/public/app/features/dashboard-scene/solo/SoloPanelPageLogo.test.tsx
+++ b/public/app/features/dashboard-scene/solo/SoloPanelPageLogo.test.tsx
@@ -33,7 +33,7 @@ global.ResizeObserver = jest.fn().mockImplementation((callback) => {
 });
 
 // Helper function to assign a mock div to a ref
-function assignMockDivToRef(ref: React.RefObject<HTMLDivElement>, mockDiv: HTMLDivElement) {
+function assignMockDivToRef(ref: React.RefObject<HTMLDivElement | null>, mockDiv: HTMLDivElement) {
   // Use type assertion to bypass readonly restriction in tests
   (ref as { current: HTMLDivElement | null }).current = mockDiv;
 }
diff --git a/public/app/features/dashboard-scene/solo/SoloPanelPageLogo.tsx b/public/app/features/dashboard-scene/solo/SoloPanelPageLogo.tsx
index 43889049807..f6807c9068d 100644
--- a/public/app/features/dashboard-scene/solo/SoloPanelPageLogo.tsx
+++ b/public/app/features/dashboard-scene/solo/SoloPanelPageLogo.tsx
@@ -8,7 +8,7 @@ import grafanaTextLogoDarkSvg from 'img/grafana_text_logo_dark.svg';
 import grafanaTextLogoLightSvg from 'img/grafana_text_logo_light.svg';
 
 interface SoloPanelPageLogoProps {
-  containerRef: React.RefObject<HTMLDivElement>;
+  containerRef: React.RefObject<HTMLDivElement | null>;
   isHovered: boolean;
   hideLogo?: UrlQueryValue;
 }
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
index 9bdcefdcab2..6194d5dcc67 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/explore/QueryLibrary/QueryLibraryContext.tsx b/public/app/features/explore/QueryLibrary/QueryLibraryContext.tsx
index 6138829632a..acb710bacd1 100644
--- a/public/app/features/explore/QueryLibrary/QueryLibraryContext.tsx
+++ b/public/app/features/explore/QueryLibrary/QueryLibraryContext.tsx
@@ -44,7 +44,7 @@ export type QueryLibraryContextType = {
     onUpdateSuccess?: () => void,
     onSelectQuery?: (query: DataQuery) => void,
     datasourceFilters?: string[],
-    parentRef?: React.RefObject<HTMLDivElement>
+    parentRef?: React.RefObject<HTMLDivElement | null>
   ) => ReactNode;
 
   /**
diff --git a/public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx b/public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx
index 62cb676ec9a..25981088d25 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>(null);
 
   useDebounce(
     () => {
diff --git a/public/app/features/live/LiveConnectionWarning.tsx b/public/app/features/live/LiveConnectionWarning.tsx
index 2f78ebd22db..94bbbd425f9 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>(null);
   const styles = useStyles2(getStyle);
 
   useEffect(() => {
diff --git a/public/app/features/query/components/QueryEditorRow.tsx b/public/app/features/query/components/QueryEditorRow.tsx
index 5cc7f3467d3..7fa1a571309 100644
--- a/public/app/features/query/components/QueryEditorRow.tsx
+++ b/public/app/features/query/components/QueryEditorRow.tsx
@@ -613,7 +613,7 @@ function SavedQueryButtons(props: {
   onUpdateSuccess?: () => void;
   onSelectQuery: (query: DataQuery) => void;
   datasourceFilters: string[];
-  parentRef: React.RefObject<HTMLDivElement>;
+  parentRef: React.RefObject<HTMLDivElement | null>;
 }) {
   const { renderSavedQueryButtons } = useQueryLibraryContext();
   return renderSavedQueryButtons(
diff --git a/public/app/features/search/hooks/useSearchKeyboardSelection.ts b/public/app/features/search/hooks/useSearchKeyboardSelection.ts
index 87c1d0cc18c..e54955399bb 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>(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..a3ed2b142dc 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>(null);
 
   useEffect(() => {
     scrollRef.current?.scrollTo(0, scrollTop);
diff --git a/public/app/features/variables/pickers/shared/VariableOptions.tsx b/public/app/features/variables/pickers/shared/VariableOptions.tsx
index aca77c6af6c..af81affe5fc 100644
--- a/public/app/features/variables/pickers/shared/VariableOptions.tsx
+++ b/public/app/features/variables/pickers/shared/VariableOptions.tsx
@@ -11,7 +11,7 @@ import checkboxWhitePng from 'img/checkbox_white.png';
 
 import { ALL_VARIABLE_VALUE } from '../../constants';
 
-export interface Props extends React.HTMLProps<HTMLUListElement>, Themeable2 {
+export interface Props extends Omit<React.HTMLProps<HTMLUListElement>, 'onToggle'>, Themeable2 {
   multi: boolean;
   values: VariableOption[];
   selectedValues: VariableOption[];
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 399d2ff21c3..6491f4b75fb 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>(null);
+  const disposalRef = useRef<monacoType.IDisposable | undefined>(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 6c17005ee78..7efac46176c 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>(null);
+  const disposalRef = useRef<monacoType.IDisposable | undefined>(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 e5b82121483..2a86e70b179 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>(null);
+  const disposalRef = useRef<monacoType.IDisposable | undefined>(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..fa7e6be5e98 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>(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..c23e604bbc7 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>(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..033a76714c7 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>(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 3d89ba1d105..2b197f60507 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>();
+  const closeCallback = useRef<(() => void) | null>(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..508e0223bef 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) | null>(null);
 
   useUnmount(() => {
     if (layoutWorkerCancelRef.current) {
diff --git a/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin2.tsx b/public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin2.tsx
index db45b3167d1..71388abe606 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>(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..bf423b1c102 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>(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..eabb767bbc5 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>(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..65180ee58f5 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>(null);
   const [renderToken, setRenderToken] = useState(0);
 
   useLayoutEffect(() => {