diff --git a/docs-site/src/components/Example/index.jsx b/docs-site/src/components/Example/index.jsx
index f45a158f6c..91e9829809 100644
--- a/docs-site/src/components/Example/index.jsx
+++ b/docs-site/src/components/Example/index.jsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from "react";
+import React, { forwardRef, useMemo, useState } from "react";
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
 import DatePicker, {
   registerLocale,
@@ -35,6 +35,7 @@ export default class CodeExampleComponent extends React.Component {
             scope={{
               // NB any globals added here should also be referenced in ../../examples/.eslintrc
               useState,
+              useMemo,
               DatePicker,
               CalendarContainer,
               ...DateFNS,
diff --git a/docs-site/src/examples/renderCustomHeaderTwoMonths.js b/docs-site/src/examples/renderCustomHeaderTwoMonths.js
index 4094cb1c90..e2357e5c32 100644
--- a/docs-site/src/examples/renderCustomHeaderTwoMonths.js
+++ b/docs-site/src/examples/renderCustomHeaderTwoMonths.js
@@ -1,5 +1,8 @@
+import { useState, useMemo } from "react";
+
 () => {
-  const [selectedDate, setSelectedDate] = useState(new Date());
+  const [startDate, setStartDate] = useState(new Date());
+  const monthsShown = useMemo(() => 2, []);
   return (
     <DatePicker
       renderCustomHeader={({
@@ -14,8 +17,10 @@
             className={
               "react-datepicker__navigation react-datepicker__navigation--previous"
             }
-            style={customHeaderCount === 1 ? { visibility: "hidden" } : null}
             onClick={decreaseMonth}
+            style={{
+              visibility: customHeaderCount === 0 ? "visible" : "hidden",
+            }}
           >
             <span
               className={
@@ -36,8 +41,11 @@
             className={
               "react-datepicker__navigation react-datepicker__navigation--next"
             }
-            style={customHeaderCount === 0 ? { visibility: "hidden" } : null}
             onClick={increaseMonth}
+            style={{
+              visibility:
+                customHeaderCount === monthsShown - 1 ? "visible" : "hidden",
+            }}
           >
             <span
               className={
@@ -49,9 +57,9 @@
           </button>
         </div>
       )}
-      selected={selectedDate}
-      onChange={(date) => setSelectedDate(date)}
-      monthsShown={2}
+      selected={startDate}
+      onChange={(date) => setStartDate(date)}
+      monthsShown={monthsShown}
     />
   );
 };