diff --git a/docs-site/src/components/Example/index.tsx b/docs-site/src/components/Example/index.tsx
index 2b73efda03..3845a93443 100644
--- a/docs-site/src/components/Example/index.tsx
+++ b/docs-site/src/components/Example/index.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useMemo, useState } from "react";
+import React, { forwardRef, useMemo, useRef, useState } from "react";
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
 import DatePicker, {
   registerLocale,
@@ -164,6 +164,7 @@ export default class CodeExampleComponent extends React.Component<
                 // NB any globals added here should also be referenced in ../../examples/.eslintrc
                 useState,
                 useMemo,
+                useRef,
                 DatePicker,
                 CalendarContainer,
                 DateFNS,
diff --git a/docs-site/src/examples/live-provider-globals.d.ts b/docs-site/src/examples/live-provider-globals.d.ts
index f693f16cf9..2b11152001 100644
--- a/docs-site/src/examples/live-provider-globals.d.ts
+++ b/docs-site/src/examples/live-provider-globals.d.ts
@@ -5,6 +5,7 @@ import type { MiddlewareState as MiddlewareStateType } from "@floating-ui/react"
 declare global {
   const useMemo: typeof React.useMemo;
   const useState: typeof React.useState;
+  const useRef: typeof React.useRef;
   const DatePicker: any;
   const CalendarContainer: any;
   const range: any;