Upgrade chakra, react, react dom, types react and refactored after upgrades.

src/components/calender/index.tsx

@@ -58,7 +58,7 @@ const Calender = (newDate?: UpdateCalendarProps): JSX.Element => {
           {weekdays.map((weekDay) => {
             return (
               <Box
-                d="flex"
+                display="flex"
                 alignContent="center"
                 alignItems="center"
                 bg="transparent"

src/theme/layout/BackToTopButton.tsx

@@ -11,7 +11,7 @@ const BackToTopButton: FC<BackToTopButtonProps> = ({
 }: BackToTopButtonProps) => {
   return (
     <Flex
-      d={show ? "flex" : "none"}
+      display={show ? "flex" : "none"}
       pos="fixed"
       top="85vh"
       right={{

src/theme/layout/DesktopNav.tsx

@@ -6,7 +6,7 @@ const DesktopNav = (): JSX.Element => {
   return (
     <HStack
       as="nav"
-      d={{ base: "none", lg: "flex" }}
+      display={{ base: "none", lg: "flex" }}
       h="auto"
       w="auto"
       spacing={4}

src/theme/layout/Header.tsx

@@ -109,7 +109,7 @@ const Header = (): JSX.Element => {
         top={0}
         position="absolute"
         ml={4}
-        d={{ base: "flex", lg: "none" }}
+        display={{ base: "flex", lg: "none" }}
         spacing="5px"
         _hover={{
           cursor: "default"
@@ -139,8 +139,8 @@ const Header = (): JSX.Element => {
           alignItems="center"
           justifyContent="space-between"
         >
-          <Box w="auto" d={{ base: "flex", lg: "none " }}></Box>
-          <Box w="100%" d={{ base: "none", lg: "flex" }} m="auto">
+          <Box w="auto" display={{ base: "flex", lg: "none " }}></Box>
+          <Box w="100%" display={{ base: "none", lg: "flex" }} m="auto">
             <HStack
               width="100%"
               alignItems="center"
@@ -169,7 +169,7 @@ const Header = (): JSX.Element => {
             onClick={() => setOpen(!open)}
             onMouseEnter={() => setHover(true)}
             onMouseLeave={() => setHover(false)}
-            d={{
+            display={{
               base: "inline-flex",
               lg: "none"
             }}

src/theme/layout/MobileNav.tsx

@@ -16,7 +16,7 @@ const MobileNav: FC<MobileNavProps> = ({ updateOpen }: MobileNavProps) => {
   return (
     <MenuList
       as="nav"
-      d={{ base: "block", lg: "none" }}
+      display={{ base: "block", lg: "none" }}
       bg="brand.main"
       h="auto"
       w="100%"