chore: add use memo on doc wrapper and run linters

Author: johannrp27

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,

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={