diff --git a/docs/content/playground/ClientComponent.tsx b/docs/content/playground/ClientComponent.tsx
index 6c339d4e..3a872390 100644
--- a/docs/content/playground/ClientComponent.tsx
+++ b/docs/content/playground/ClientComponent.tsx
@@ -1,13 +1,13 @@
 import Spinner from '@deities/ui/Spinner.tsx';
 import Stack from '@deities/ui/Stack.tsx';
-import { Suspense, useEffect, useState } from 'react';
+import { ReactElement, Suspense, useEffect, useState } from 'react';
 
 export default function ClientComponent({
   module: Module,
 }: {
-  module: () => JSX.Element;
+  module: () => ReactElement;
 }) {
-  const [element, setElement] = useState<JSX.Element | null>(null);
+  const [element, setElement] = useState<ReactElement | null>(null);
 
   useEffect(() => {
     import('./ClientScope.tsx').then(({ default: ClientScope }) =>
diff --git a/docs/content/playground/ClientScope.tsx b/docs/content/playground/ClientScope.tsx
index 86f8c0ec..640d5ec9 100644
--- a/docs/content/playground/ClientScope.tsx
+++ b/docs/content/playground/ClientScope.tsx
@@ -10,6 +10,7 @@ import { ScaleContext } from '@deities/ui/hooks/useScale.tsx';
 import { setDefaultPortalContainer } from '@deities/ui/Portal.tsx';
 import { css } from '@emotion/css';
 import { init as initFbt, IntlVariations } from 'fbt';
+import { ReactElement } from 'react';
 
 initializeCSSVariables();
 
@@ -68,7 +69,7 @@ if (import.meta.env.DEV) {
   import('@deities/hera/ui/fps/Fps.tsx');
 }
 
-export default function ClientScope({ children }: { children: JSX.Element }) {
+export default function ClientScope({ children }: { children: ReactElement }) {
   return (
     <ScaleContext>
       <HideContext>
diff --git a/hera/Map.tsx b/hera/Map.tsx
index 87ecb0c2..05fc150f 100644
--- a/hera/Map.tsx
+++ b/hera/Map.tsx
@@ -17,7 +17,7 @@ import { css, cx } from '@emotion/css';
 import ImmutableMap from '@nkzw/immutable-map';
 import Images from 'athena-crisis:images';
 // eslint-disable-next-line @deities/no-lazy-import
-import { lazy } from 'react';
+import { lazy, ReactElement } from 'react';
 import Building from './Building.tsx';
 import Decorators from './Decorators.tsx';
 import Fog from './Fog.tsx';
@@ -144,7 +144,7 @@ const MapComponent = ({
       <Decorators map={map} paused={paused} tileSize={tileSize} />
       {renderEntities && (
         <Tick animationConfig={animationConfig} paused={paused}>
-          {map.reduceEachField<Array<JSX.Element>>((list, vector) => {
+          {map.reduceEachField<Array<ReactElement>>((list, vector) => {
             const animation = animations?.get(vector);
             const building = map.buildings.get(vector);
             const unit = map.units.get(vector);
diff --git a/hera/MapAnimations.tsx b/hera/MapAnimations.tsx
index 5608a969..c1f5973a 100644
--- a/hera/MapAnimations.tsx
+++ b/hera/MapAnimations.tsx
@@ -17,6 +17,7 @@ import ImmutableMap from '@nkzw/immutable-map';
 import { AnimatePresence } from 'framer-motion';
 import {
   ComponentType,
+  ReactElement,
   ReactNode,
   useCallback,
   useEffect,
@@ -767,8 +768,8 @@ export function MapAnimations({
   skipBanners?: boolean;
   state: State;
 }) {
-  const animationsWithTransitions: Array<JSX.Element> = [];
-  const mainAnimations: Array<JSX.Element> = [];
+  const animationsWithTransitions: Array<ReactElement> = [];
+  const mainAnimations: Array<ReactElement> = [];
   animations.forEach((animation, position) => {
     const { type } = animation;
     if (
diff --git a/hera/animations/Animation.tsx b/hera/animations/Animation.tsx
index fb3402dc..6a6f44bf 100644
--- a/hera/animations/Animation.tsx
+++ b/hera/animations/Animation.tsx
@@ -77,7 +77,7 @@ export default function Animation({
   }, [initialDelay, rate, rumble, rumbleDuration, sound]);
 
   const setRef = useCallback(
-    async (element: HTMLDivElement) => {
+    (element: HTMLDivElement) => {
       if (!element) {
         return;
       }
@@ -107,7 +107,7 @@ export default function Animation({
           }
         }
       };
-      await scheduleTimer(next, initialDelay);
+      scheduleTimer(next, initialDelay);
     },
     [
       delay,
diff --git a/hera/behavior/AbstractSelectBehavior.tsx b/hera/behavior/AbstractSelectBehavior.tsx
index cf97fbad..98a14325 100644
--- a/hera/behavior/AbstractSelectBehavior.tsx
+++ b/hera/behavior/AbstractSelectBehavior.tsx
@@ -2,7 +2,7 @@ import Building from '@deities/athena/map/Building.tsx';
 import Entity from '@deities/athena/map/Entity.tsx';
 import Unit from '@deities/athena/map/Unit.tsx';
 import Vector from '@deities/athena/map/Vector.tsx';
-import { useCallback } from 'react';
+import { ReactElement, useCallback } from 'react';
 import { Actions, State, StateLike, StateWithActions } from '../Types.tsx';
 import SelectEntity from '../ui/SelectEntity.tsx';
 import { resetBehavior, selectFallback } from './Behavior.tsx';
@@ -76,7 +76,7 @@ export default abstract class AbstractSelectBehavior {
     );
   }
 
-  component = ({ actions, state }: StateWithActions): JSX.Element | null => {
+  component = ({ actions, state }: StateWithActions): ReactElement | null => {
     return (
       <SelectEntity
         actions={actions}
diff --git a/hera/drawer/Drawer.tsx b/hera/drawer/Drawer.tsx
index 5f0b5d9a..1e02e2b4 100644
--- a/hera/drawer/Drawer.tsx
+++ b/hera/drawer/Drawer.tsx
@@ -26,7 +26,7 @@ export default function Drawer({
   inset?: number;
   mode?: string;
   position?: DrawerPosition;
-  ref?: RefObject<HTMLDivElement>;
+  ref?: RefObject<HTMLDivElement | null>;
   sidebar?: ReactNode;
   visible: boolean;
 }>) {
diff --git a/hera/editor/behavior/EntityBehavior.tsx b/hera/editor/behavior/EntityBehavior.tsx
index 89412840..141d7532 100644
--- a/hera/editor/behavior/EntityBehavior.tsx
+++ b/hera/editor/behavior/EntityBehavior.tsx
@@ -3,7 +3,7 @@ import Building from '@deities/athena/map/Building.tsx';
 import Entity, { isBuilding, isUnit } from '@deities/athena/map/Entity.tsx';
 import Unit from '@deities/athena/map/Unit.tsx';
 import Vector from '@deities/athena/map/Vector.tsx';
-import { useCallback } from 'react';
+import { ReactElement, useCallback } from 'react';
 import AbstractSelectBehavior from '../../behavior/AbstractSelectBehavior.tsx';
 import { MenuItemProps } from '../../behavior/Menu.tsx';
 import Cursor from '../../Cursor.tsx';
@@ -148,7 +148,10 @@ export default class EntityBehavior extends AbstractSelectBehavior {
     return { building, unit };
   }
 
-  override component = ({ actions, state }: StateWithActions) => {
+  override component = ({
+    actions,
+    state,
+  }: StateWithActions): ReactElement | null => {
     const { update } = actions;
     const {
       map,
diff --git a/hera/editor/lib/ActionCard.tsx b/hera/editor/lib/ActionCard.tsx
index b27f0465..2e9c4573 100644
--- a/hera/editor/lib/ActionCard.tsx
+++ b/hera/editor/lib/ActionCard.tsx
@@ -147,7 +147,7 @@ export default memo(function ActionCard({
   onChange?: ActionChangeFn;
   playerDetails?: PlayerDetails;
   position?: DrawerPosition;
-  scrollRef: RefObject<HTMLElement> | null;
+  scrollRef: RefObject<HTMLElement | null> | null;
   setMap?: SetMapFunction;
   trigger?: EffectTrigger;
   user: UserWithUnlocks | null;
diff --git a/hera/editor/panels/EffectsPanel.tsx b/hera/editor/panels/EffectsPanel.tsx
index 1d132b18..2d0ad6d5 100644
--- a/hera/editor/panels/EffectsPanel.tsx
+++ b/hera/editor/panels/EffectsPanel.tsx
@@ -56,7 +56,7 @@ export default function EffectsPanel({
   map: MapData;
   position: DrawerPosition;
   scenario: Scenario;
-  scrollRef: RefObject<HTMLElement>;
+  scrollRef: RefObject<HTMLElement | null>;
   setEditorState: SetEditorStateFunction;
   setMap: SetMapFunction;
   setScenario: (scenario: Scenario) => void;
diff --git a/hera/editor/panels/MapEditorControlPanel.tsx b/hera/editor/panels/MapEditorControlPanel.tsx
index 27479566..4ef2394f 100644
--- a/hera/editor/panels/MapEditorControlPanel.tsx
+++ b/hera/editor/panels/MapEditorControlPanel.tsx
@@ -102,7 +102,7 @@ export default function MapEditorControlPanel({
   user: UserWithUnlocks;
   visible: boolean;
 }) {
-  const ref = useRef(null);
+  const ref = useRef<HTMLDivElement>(null);
   const updateEffect = useCallback(
     (effect: Effect) => {
       const { effect: currentEffect, trigger } = editor.scenario;
diff --git a/hera/hooks/useClientGameAction.tsx b/hera/hooks/useClientGameAction.tsx
index 65588744..5ae781d1 100644
--- a/hera/hooks/useClientGameAction.tsx
+++ b/hera/hooks/useClientGameAction.tsx
@@ -62,7 +62,7 @@ export default function useClientGameAction(
   onError?: ((error: Error) => void) | null,
   mutateAction?: MutateActionResponseFnName | null,
 ) {
-  const actionQueue = useRef<Promise<GameActionResponse>>();
+  const actionQueue = useRef<Promise<GameActionResponse>>(undefined);
   return useCallback(
     (action: Action): Promise<GameActionResponse> =>
       (actionQueue.current = (actionQueue.current || Promise.resolve(null))
diff --git a/hera/ui/GameActions.tsx b/hera/ui/GameActions.tsx
index b53b37e2..555bd5db 100644
--- a/hera/ui/GameActions.tsx
+++ b/hera/ui/GameActions.tsx
@@ -284,8 +284,8 @@ const EndTurnButton = ({
   const { currentViewer, lastActionResponse, map, vision } = state;
   const [endTurnIsExpanded, setEndTurnIsExpanded] = useState<boolean>(false);
   const [cooldown, setCooldown] = useState(false);
-  const timerRef = useRef<NativeTimeout>();
-  const highlightTimerRef = useRef<NativeTimeout>();
+  const timerRef = useRef<NativeTimeout>(null);
+  const highlightTimerRef = useRef<NativeTimeout>(null);
 
   useEffect(() => {
     if (cooldown) {
diff --git a/hera/ui/TeamSelector.tsx b/hera/ui/TeamSelector.tsx
index 131adac6..d15def85 100644
--- a/hera/ui/TeamSelector.tsx
+++ b/hera/ui/TeamSelector.tsx
@@ -239,7 +239,7 @@ const PlayerIconWithDrag = ({
   onLeave,
   selected,
 }: {
-  container: RefObject<Element>;
+  container: RefObject<HTMLElement | null>;
   id: PlayerID;
   navigate: [Team | undefined, Team | undefined];
   onDrag: (id: PlayerID | null, ghost: boolean) => void;
diff --git a/ui/MenuButton.tsx b/ui/MenuButton.tsx
index 89c211cf..e0741444 100644
--- a/ui/MenuButton.tsx
+++ b/ui/MenuButton.tsx
@@ -19,7 +19,7 @@ export default memo(function MenuButton({
   delay?: boolean;
   hide?: boolean;
   onClick?: (event: MouseEvent) => void;
-  ref?: RefObject<HTMLDivElement>;
+  ref?: RefObject<HTMLDivElement | null>;
   style?: MotionStyle;
 }) {
   return (
diff --git a/ui/TagInput.tsx b/ui/TagInput.tsx
index ddff1897..e815b870 100644
--- a/ui/TagInput.tsx
+++ b/ui/TagInput.tsx
@@ -24,7 +24,7 @@ export default function TagInput<T>({
   tags: ReadonlyArray<T>;
   toValue?: (tag: T) => string;
 }) {
-  const inputRef = useRef<HTMLInputElement>();
+  const inputRef = useRef<HTMLInputElement>(undefined);
   const ignoreList = useMemo(() => new Set(tags.map(toValue)), [tags, toValue]);
   return (
     <Stack
diff --git a/ui/Typeahead.tsx b/ui/Typeahead.tsx
index e11573ea..955d90e5 100644
--- a/ui/Typeahead.tsx
+++ b/ui/Typeahead.tsx
@@ -256,7 +256,7 @@ export default function Typeahead<T>({
   );
 
   const [highlightedIndex, setHighlightedIndex] = useState(-1);
-  const input = useRef<HTMLInputElement>();
+  const input = useRef<HTMLInputElement>(undefined);
 
   const resetResults = useCallback(() => {
     setResults(emptySuggestions?.length ? emptySuggestions : []);
diff --git a/ui/hooks/useScrollIntoView.tsx b/ui/hooks/useScrollIntoView.tsx
index a559c2ae..441294fc 100644
--- a/ui/hooks/useScrollIntoView.tsx
+++ b/ui/hooks/useScrollIntoView.tsx
@@ -1,7 +1,7 @@
 import { RefObject, useEffect } from 'react';
 
 export default function useScrollIntoView(
-  element: RefObject<HTMLElement>,
+  element: RefObject<HTMLElement | null>,
   scrollIntoView: boolean | undefined,
 ) {
   useEffect(() => {