From 7a954283e359e5b0a2055fe34f017c384e74f1ce Mon Sep 17 00:00:00 2001
From: Johann F Rojas <43022731+johannrp27@users.noreply.github.com>
Date: Thu, 8 May 2025 20:55:53 -0500
Subject: [PATCH 1/4] fix: correct usage of customHeaderCount to keep arrows on
 any monthsShown prop

---
 docs-site/src/examples/renderCustomHeaderTwoMonths.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/docs-site/src/examples/renderCustomHeaderTwoMonths.js b/docs-site/src/examples/renderCustomHeaderTwoMonths.js
index 39e4450674..eb9ed227df 100644
--- a/docs-site/src/examples/renderCustomHeaderTwoMonths.js
+++ b/docs-site/src/examples/renderCustomHeaderTwoMonths.js
@@ -1,5 +1,6 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
+  const monthsShown = useMemo(() => 2, []);
   return (
     <DatePicker
       renderCustomHeader={({
@@ -14,7 +15,7 @@
             className={
               "react-datepicker__navigation react-datepicker__navigation--previous"
             }
-            style={customHeaderCount === 1 ? { visibility: "hidden" } : null}
+            style={{ visibility: customHeaderCount === 0 ? 'visible' : 'hidden' }}
             onClick={decreaseMonth}
           >
             <span
@@ -36,7 +37,7 @@
             className={
               "react-datepicker__navigation react-datepicker__navigation--next"
             }
-            style={customHeaderCount === 0 ? { visibility: "hidden" } : null}
+            style={{ visibility: customHeaderCount === monthsShown - 1 ? 'visible' : 'hidden' }}
             onClick={increaseMonth}
           >
             <span
@@ -51,7 +52,7 @@
       )}
       selected={startDate}
       onChange={(date) => setStartDate(date)}
-      monthsShown={2}
+      monthsShown={monthsShown}
     />
   );
 };

From ef9b2053a040591857eb21448a5f02a0d272ed7b Mon Sep 17 00:00:00 2001
From: Johann F Rojas <43022731+johannrp27@users.noreply.github.com>
Date: Mon, 12 May 2025 09:08:55 -0500
Subject: [PATCH 2/4] chore: add use memo on doc wrapper and run linters

---
 docs-site/src/components/Example/index.jsx            |  3 ++-
 docs-site/src/examples/renderCustomHeaderTwoMonths.js | 10 ++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

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 eb9ed227df..9824a8af01 100644
--- a/docs-site/src/examples/renderCustomHeaderTwoMonths.js
+++ b/docs-site/src/examples/renderCustomHeaderTwoMonths.js
@@ -1,6 +1,7 @@
 () => {
   const [startDate, setStartDate] = useState(new Date());
   const monthsShown = useMemo(() => 2, []);
+
   return (
     <DatePicker
       renderCustomHeader={({
@@ -15,8 +16,10 @@
             className={
               "react-datepicker__navigation react-datepicker__navigation--previous"
             }
-            style={{ visibility: customHeaderCount === 0 ? 'visible' : 'hidden' }}
             onClick={decreaseMonth}
+            style={{
+              visibility: customHeaderCount === 0 ? "visible" : "hidden",
+            }}
           >
             <span
               className={
@@ -37,8 +40,11 @@
             className={
               "react-datepicker__navigation react-datepicker__navigation--next"
             }
-            style={{ visibility: customHeaderCount === monthsShown - 1 ? 'visible' : 'hidden' }}
             onClick={increaseMonth}
+            style={{
+              visibility:
+                customHeaderCount === monthsShown - 1 ? "visible" : "hidden",
+            }}
           >
             <span
               className={

From 11c16813b32ee2cfd9b741c1b0925c9baec3e212 Mon Sep 17 00:00:00 2001
From: Martijn Russchen <mrusschen@gmail.com>
Date: Sun, 25 May 2025 14:29:36 +0200
Subject: [PATCH 3/4] Add useMemo import to renderCustomHeaderTwoMonths.js

---
 docs-site/src/examples/renderCustomHeaderTwoMonths.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs-site/src/examples/renderCustomHeaderTwoMonths.js b/docs-site/src/examples/renderCustomHeaderTwoMonths.js
index 5135cb4aa6..8414cccd22 100644
--- a/docs-site/src/examples/renderCustomHeaderTwoMonths.js
+++ b/docs-site/src/examples/renderCustomHeaderTwoMonths.js
@@ -1,3 +1,5 @@
+import React, { useState, useMemo } from "react";
+
 () => {
   const [startDate, setStartDate] = useState(new Date());
   const monthsShown = useMemo(() => 2, []);

From 5f23baa34867e441ca2559466edbc97dc9510f1f Mon Sep 17 00:00:00 2001
From: Martijn Russchen <mrusschen@gmail.com>
Date: Sun, 25 May 2025 14:32:50 +0200
Subject: [PATCH 4/4] Update renderCustomHeaderTwoMonths.js

---
 docs-site/src/examples/renderCustomHeaderTwoMonths.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs-site/src/examples/renderCustomHeaderTwoMonths.js b/docs-site/src/examples/renderCustomHeaderTwoMonths.js
index 8414cccd22..e2357e5c32 100644
--- a/docs-site/src/examples/renderCustomHeaderTwoMonths.js
+++ b/docs-site/src/examples/renderCustomHeaderTwoMonths.js
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from "react";
+import { useState, useMemo } from "react";
 
 () => {
   const [startDate, setStartDate] = useState(new Date());