diff --git a/src/components/forms/context/Form/Form.tsx b/src/components/forms/context/Form/Form.tsx
index d833c79..0563726 100644
--- a/src/components/forms/context/Form/Form.tsx
+++ b/src/components/forms/context/Form/Form.tsx
@@ -37,7 +37,7 @@ export const Form = (props: FormProps) => {
   const { unstyled = false, nestable, children, className, ...propsRest } = props;
   
   const formId = React.useId();
-  const [wrapperRef, setWrapperRef] = React.useState<null | React.ElementRef<'div'>>(null);
+  const [wrapperRef, setWrapperRef] = React.useState<null | React.ComponentRef<'div'>>(null);
   
   // Memoize to keep a stable reference
   const context: FormContext = React.useMemo(() => ({ formId }), [formId]);
diff --git a/src/components/forms/context/Form/FormOptics.tsx b/src/components/forms/context/Form/FormOptics.tsx
index 911ecfe..7649346 100644
--- a/src/components/forms/context/Form/FormOptics.tsx
+++ b/src/components/forms/context/Form/FormOptics.tsx
@@ -40,7 +40,7 @@ export const Form = (props: FormProps) => {
   const { unstyled = false, nestable, children, className, ...propsRest } = props;
   
   const formId = React.useId();
-  const [wrapperRef, setWrapperRef] = React.useState<null | React.ElementRef<'div'>>(null);
+  const [wrapperRef, setWrapperRef] = React.useState<null | React.ComponentRef<'div'>>(null);
   
   // Memoize to keep a stable reference
   const context: FormContext = React.useMemo(() => ({ formId }), [formId]);
diff --git a/src/components/forms/controls/Select/Select.tsx b/src/components/forms/controls/Select/Select.tsx
index aefa240..ea58c51 100644
--- a/src/components/forms/controls/Select/Select.tsx
+++ b/src/components/forms/controls/Select/Select.tsx
@@ -89,7 +89,7 @@ export const Select = Object.assign(
   (props: SelectProps) => {
     const { children, unstyled = false, searchable, ...propsRest } = props;
     
-    const selectedRef = React.useRef<React.ElementRef<'button'>>(null);
+    const selectedRef = React.useRef<React.ComponentRef<'button'>>(null);
     const [selected, setSelected] = React.useState<null | OptionDef>(null);
     
     const listRef = React.useRef([]);
diff --git a/src/components/overlays/DropdownMenu/DropdownMenuProvider.tsx b/src/components/overlays/DropdownMenu/DropdownMenuProvider.tsx
index d1dddbf..4f01a3a 100644
--- a/src/components/overlays/DropdownMenu/DropdownMenuProvider.tsx
+++ b/src/components/overlays/DropdownMenu/DropdownMenuProvider.tsx
@@ -85,11 +85,11 @@ export const DropdownMenuProvider = Object.assign(
         selectedRef.current?.focus(); // Return focus
       },
       close: () => { setIsOpen(false); },
-    }), [selected, selectedRef]);
+    }), [selected, setIsOpen, getItemProps]);
     
     const renderAnchor = () => {
       const anchorProps: AnchorRenderArgs['props'] = (userProps?: undefined | React.HTMLProps<Element>) => {
-        const userPropsRef: undefined | string | React.Ref<any> = userProps?.ref ?? undefined;
+        const userPropsRef: undefined | string | React.Ref<Element> = userProps?.ref ?? undefined;
         if (typeof userPropsRef === 'string') {
           // We can't merge refs if one of the refs is a string
           console.error(`Failed to render DropdownMenuProvider, due to use of legacy string ref`);
@@ -112,7 +112,7 @@ export const DropdownMenuProvider = Object.assign(
         return <span {...anchorProps()}>{children}</span>;
       }
       if (React.Children.count(children) === 1) {
-        return React.cloneElement(children, anchorProps(children.props));
+        return React.cloneElement(children, anchorProps(children.props as React.HTMLProps<Element>));
       }
       
       console.error(`Invalid children passed to DropdownMenuProvider, expected a render prop or single child element.`);
@@ -132,7 +132,7 @@ export const DropdownMenuProvider = Object.assign(
             className: cx(propsRest.className),
           })}
           tabIndex={undefined}
-          ref={mergeRefs(refs.setFloating as any, propsRest.ref)}
+          ref={mergeRefs<HTMLUListElement>(refs.setFloating, propsRest.ref)}
           data-placement={placementEffective}
         >
           {items}
diff --git a/src/components/overlays/Tooltip/Tooltip.stories.tsx b/src/components/overlays/Tooltip/Tooltip.stories.tsx
index 8c679bc..b9ca6be 100644
--- a/src/components/overlays/Tooltip/Tooltip.stories.tsx
+++ b/src/components/overlays/Tooltip/Tooltip.stories.tsx
@@ -47,7 +47,7 @@ export const TooltipScroll: StoryObj<typeof Tooltip> = {
   render: () => (
     <Tooltip>
       <p>
-        Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Pellentesque eget sem ut neque lobortis pharetra nec vel quam. Etiam sem neque, gravida sed pharetra ut, vehicula quis lectus. Donec ac rhoncus purus. Proin ultricies augue vitae purus feugiat, in ultrices lorem aliquet. Donec eleifend ac dolor a auctor.
+        Lorem ipsum dolor sit amet, <a href="/" onClick={event => { event.preventDefault(); }}>consectetur</a> adipiscing elit. Pellentesque eget sem ut neque lobortis pharetra nec vel quam. Etiam sem neque, gravida sed pharetra ut, vehicula quis lectus. Donec ac rhoncus purus. Proin ultricies augue vitae purus feugiat, in ultrices lorem aliquet. Donec eleifend ac dolor a auctor.
       </p>
       <p>
         Cras ac suscipit nibh. Fusce tincidunt iaculis dapibus. Vivamus sit amet neque eu velit tincidunt semper. Donec at magna aliquam mi consectetur imperdiet. Donec pretium placerat quam, in sodales purus porta vitae. Phasellus nisl justo, luctus vel mi vel, sollicitudin.
@@ -67,7 +67,7 @@ const TooltipNativeAnchoringControlled = () => {
   // https://www.w3.org/TR/css-anchor-position-1/#implicit
   const id = React.useId();
   const anchorName = `--bk-tooltip-anchor-${CSS.escape(id)}`;
-  const refTooltip = React.useRef<React.ElementRef<typeof Tooltip>>(null);
+  const refTooltip = React.useRef<React.ComponentRef<typeof Tooltip>>(null);
   
   return (
     <>
@@ -76,7 +76,7 @@ const TooltipNativeAnchoringControlled = () => {
       {/* @ts-ignore Anchor Positioning not yet supported. */}
       <Tooltip ref={refTooltip} id={id} popover="manual" style={{ positionAnchor: anchorName }}>
         This is a tooltip with a lot of text that gives more information about the element.
-        It has a <a href="#">link</a> you can focus.
+        It has a <a href="/" onClick={event => { event.preventDefault(); }}>link</a> you can focus.
       </Tooltip>
       <Button type="button" popoverTarget={id} variant="primary" label="Hover over me"
         // @ts-ignore Anchor Positioning not yet supported.
diff --git a/src/components/overlays/Tooltip/TooltipProvider.stories.tsx b/src/components/overlays/Tooltip/TooltipProvider.stories.tsx
index a8257f8..491bb12 100644
--- a/src/components/overlays/Tooltip/TooltipProvider.stories.tsx
+++ b/src/components/overlays/Tooltip/TooltipProvider.stories.tsx
@@ -62,17 +62,17 @@ export const TooltipWithFocus: Story = {
 };
 
 const TooltipWithDrag = () => {
-  const boundaryRef = React.useRef<React.ElementRef<'div'>>(null);
+  const boundaryRef = React.useRef<React.ComponentRef<'div'>>(null);
   const [boundaryRendered, setBoundaryRendered] = React.useState(false);
   
   React.useEffect(() => {
     if (boundaryRef.current && !boundaryRendered) { setBoundaryRendered(true); }
-  }, [boundaryRef.current]);
+  }, [boundaryRendered]);
   
   return (
     <div ref={boundaryRef} style={{ minHeight: 400, display: 'grid', placeContent: 'center' }}>
       {boundaryRef.current &&
-        <Draggable>
+        <Draggable<HTMLButtonElement>>
           {({ targetRef }) =>
             <TooltipProvider
               tooltip="The position of this tooltip will update to stay in view as it gets dragged towards
diff --git a/src/components/overlays/Tooltip/TooltipProvider.tsx b/src/components/overlays/Tooltip/TooltipProvider.tsx
index ca01afc..f579e00 100644
--- a/src/components/overlays/Tooltip/TooltipProvider.tsx
+++ b/src/components/overlays/Tooltip/TooltipProvider.tsx
@@ -54,11 +54,10 @@ export const TooltipProvider = (props: TooltipProviderProps) => {
     ...tooltipProps
   } = props;
   
-  const arrowRef = React.useRef(null);
+  const arrowRef = React.useRef<HTMLElement>(null);
   
   const {
     context,
-    isOpen,
     isMounted,
     refs,
     floatingStyles,
@@ -70,7 +69,7 @@ export const TooltipProvider = (props: TooltipProviderProps) => {
     offset: 6,
     enablePreciseTracking,
     boundary,
-    arrowRef,
+    ...(arrowRef.current ? { arrowRef:  arrowRef as React.RefObject<HTMLElement> } : {}),
   });
   const arrow = usePopoverArrow({ context });
   
@@ -81,7 +80,7 @@ export const TooltipProvider = (props: TooltipProviderProps) => {
     } else {
       onTooltipDeactivated?.();
     }
-  }, [isMounted]);
+  }, [isMounted, onTooltipActivated, onTooltipDeactivated]);
   
   const renderTooltip = () => {
     if (!isMounted) { return null; }
@@ -93,7 +92,7 @@ export const TooltipProvider = (props: TooltipProviderProps) => {
     return (
       <Tooltip
         {...floatingProps}
-        ref={mergeRefs(refs.setFloating as any, tooltipProps.ref)}
+        ref={mergeRefs<HTMLDivElement>(refs.setFloating, tooltipProps.ref)}
         className={cx(
           floatingProps.className as ClassNameArgument,
           { [TooltipClassNames['bk-tooltip--arrow-top']]: arrow?.side === 'top' },
@@ -120,7 +119,7 @@ export const TooltipProvider = (props: TooltipProviderProps) => {
   
   const renderAnchor = () => {
     const renderPropArg: GetReferenceProps = (userProps?: undefined | React.HTMLProps<Element>) => {
-      const userPropsRef: undefined | string | React.Ref<any> = userProps?.ref ?? undefined;
+      const userPropsRef: undefined | string | React.Ref<Element> = userProps?.ref ?? undefined;
       if (typeof userPropsRef === 'string') {
         // We can't merge refs if one of the refs is a string
         console.error(`Failed to render Tooltip, due to use of legacy string ref`);
@@ -143,7 +142,7 @@ export const TooltipProvider = (props: TooltipProviderProps) => {
       return <span {...renderPropArg()}>{children}</span>;
     }
     if (React.Children.count(children) === 1) {
-      return React.cloneElement(children, renderPropArg(children.props));
+      return React.cloneElement(children, renderPropArg(children.props as React.HTMLProps<Element>));
     }
     
     console.error(`Invalid children passed to TooltipContainer, expected a render prop or single child element.`);
diff --git a/src/util/drag.ts b/src/util/drag.ts
index 7dd5096..e976e42 100644
--- a/src/util/drag.ts
+++ b/src/util/drag.ts
@@ -34,23 +34,25 @@ export type UseDraggableProps = {
   viewport?: boolean,
   rectLimits?: { left: number, right: number, top: number, bottom: number },
 };
-export type UseDraggableResult = {
-  targetRef: React.Ref<null | HTMLElement>,
-  handleRef: React.Ref<null | HTMLElement>,
+export type UseDraggableResult<T extends HTMLElement, H extends HTMLElement> = {
+  targetRef: React.Ref<T>,
+  handleRef: React.Ref<H>,
   getTargetProps: () => Record<string, unknown>,
   dragging: boolean,
   delta: Delta,
   resetState: () => void,
 };
-export const useDraggable = (props: UseDraggableProps): UseDraggableResult => {
+export const useDraggable = <T extends HTMLElement = HTMLElement, H extends HTMLElement = HTMLElement>(
+  props: UseDraggableProps,
+): UseDraggableResult<T, H> => {
   const {
     controlStyle = true,
     viewport = false,
     rectLimits,
   } = props;
   
-  const targetRef = React.useRef<HTMLElement>(null);
-  const handleRef = React.useRef<HTMLElement>(null);
+  const targetRef = React.useRef<T>(null);
+  const handleRef = React.useRef<H>(null);
   const [dragging, setDragging] = React.useState<boolean>(false);
   const [prev, setPrev] = React.useState({ x: 0, y: 0 });
   const [delta, setDelta] = React.useState({ x: 0, y: 0 });
@@ -184,9 +186,12 @@ export const useDraggable = (props: UseDraggableProps): UseDraggableResult => {
   return { targetRef, handleRef, getTargetProps, dragging, delta, resetState };
 };
 
-export type DraggableProps = {
-  children: (result: UseDraggableResult) => React.ReactNode,
+export type DraggableProps<T extends HTMLElement, H extends HTMLElement> = {
+  children: (result: UseDraggableResult<T, H>) => React.ReactNode,
 };
-export const Draggable = ({ children, ...rest }: DraggableProps) => {
+export const Draggable = <T extends HTMLElement = HTMLElement, H extends HTMLElement = HTMLElement>({
+  children,
+  ...rest
+}: DraggableProps<T, H>) => {
   return children(useDraggable(rest));
 };