package.json

@@ -16,7 +16,7 @@
     "pretty": "prettier --write ."
   },
   "dependencies": {
-    "@chakra-ui/react": "^1.8.8",
+    "@chakra-ui/react": "^2.0.2",
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
     "@iconify/react": "^3.2.1",
@@ -24,13 +24,13 @@
     "formik": "^2.2.9",
     "framer-motion": "^6.3.3",
     "next": "12.1.6",
-    "react": "<=17.0.2",
-    "react-dom": "<=17.0.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "sharp": "^0.30.4"
   },
   "devDependencies": {
     "@types/node": "^17.0.35",
-    "@types/react": "<18.0.0",
+    "@types/react": "^18.0.9",
     "@typescript-eslint/eslint-plugin": "^5.25.0",
     "eslint": "^8.16.0",
     "eslint-config-next": "^12.1.6",

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%"