feat(date): fix focus loss when using navbar with keyboard

The Navbar of the internal date picker component has been memoized to ensure that it doesn't
rerender unless it absolutely needs to (which should be never as it's just two buttons; the month
name isn't part of the navbar, it's just styled that way)

fix #7158

src/components/date/__internal__/date-picker/date-picker.component.tsx

@@ -6,6 +6,7 @@ import React, {
   useMemo,
   useRef,
   useState,
+  memo,
 } from "react";
 import {
   DayPicker,
@@ -72,6 +73,17 @@ const popoverMiddleware = [
   }),
 ];
 
+/** The Navbar has been lifted out of the main component to ensure that it can be properly
+ * memoized and not re-rendered on every update of the DatePicker component.
+ *
+ * Resolves https://jira.sage.com/browse/FE-7047
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Nav = (props: any) => {
+  return <Navbar {...props} />;
+};
+const MemoizedNav = memo(Nav);
+
 export const DatePicker = ({
   inputElement,
   minDate,
@@ -257,9 +269,10 @@ export const DatePicker = ({
               handleDayClick(date, e);
             }}
             components={{
-              Nav: (props) => {
-                return <Navbar {...props} />;
-              },
+              // TODO: Fix this. It's a horrible approach to take.
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore: Type 'MemoizedNav' is not assignable to type 'ComponentType<NavbarProps>'.
+              Nav: MemoizedNav,
               Weekday: (props) => {
                 const fixedDays = {
                   Sunday: 0,