diff --git a/docs/basic-features/script.md b/docs/basic-features/script.md
index 5cc30b220305..9e2fc40d7a74 100644
--- a/docs/basic-features/script.md
+++ b/docs/basic-features/script.md
@@ -240,6 +240,7 @@ Or by using the `dangerouslySetInnerHTML` property:
 ```jsx
 <Script
   id="show-banner"
+  strategy="lazyOnload"
   dangerouslySetInnerHTML={{
     __html: `document.getElementById('banner').classList.remove('hidden')`,
   }}
@@ -280,16 +281,19 @@ export default function Home() {
 Some third-party scripts require users to run JavaScript code after the script has finished loading and every time the component is mounted (after a route navigation for example). You can execute code after the script's `load` event when it first loads and then after every subsequent component re-mount using the `onReady` property:
 
 ```jsx
+import { useRef } from 'react'
 import Script from 'next/script'
 
 export default function Home() {
+  const mapRef = useRef()
   return (
     <>
+      <div ref={mapRef}></div>
       <Script
         id="google-maps"
         src="https://maps.googleapis.com/maps/api/js"
         onReady={() => {
-          new google.maps.Map(ref.current, {
+          new google.maps.Map(mapRef.current, {
             center: { lat: -34.397, lng: 150.644 },
             zoom: 8,
           })