diff --git a/src/useLockedBody/useLockedBody.demo.tsx b/src/useLockedBody/useLockedBody.demo.tsx
index dc7b1035..c934e8e5 100644
--- a/src/useLockedBody/useLockedBody.demo.tsx
+++ b/src/useLockedBody/useLockedBody.demo.tsx
@@ -16,7 +16,7 @@ const fakeScrollableStyle: CSSProperties = {
 
 // Example 1: useLockedBody as useState()
 export default function App() {
-  const [locked, setLocked] = useLockedBody()
+  const [locked, setLocked] = useLockedBody(false, 'root')
 
   const toggleLocked = () => {
     setLocked(!locked)
@@ -39,7 +39,7 @@ export function App2() {
     setLocked(!locked)
   }
 
-  useLockedBody(locked)
+  useLockedBody(locked, 'root')
 
   return (
     <div style={fakeScrollableStyle}>
diff --git a/src/useLockedBody/useLockedBody.ts b/src/useLockedBody/useLockedBody.ts
index 35ffc24e..9c8b3892 100644
--- a/src/useLockedBody/useLockedBody.ts
+++ b/src/useLockedBody/useLockedBody.ts
@@ -4,7 +4,10 @@ import { useIsomorphicLayoutEffect } from '..'
 
 type UseLockedBodyOutput = [boolean, (locked: boolean) => void]
 
-function useLockedBody(initialLocked = false): UseLockedBodyOutput {
+function useLockedBody(
+  initialLocked = false,
+  rootId = '___gatsby', // Default to `___gatsby` to not introduce breaking change
+): UseLockedBodyOutput {
   const [locked, setLocked] = useState(initialLocked)
 
   // Do the side effect before render
@@ -21,7 +24,7 @@ function useLockedBody(initialLocked = false): UseLockedBodyOutput {
     document.body.style.overflow = 'hidden'
 
     // Get the scrollBar width
-    const root = document.getElementById('___gatsby') // or root
+    const root = document.getElementById(rootId) // or root
     const scrollBarWidth = root ? root.offsetWidth - root.scrollWidth : 0
 
     // Avoid width reflow