fixed table on admin page and update @types/react package

package.json

@@ -49,7 +49,7 @@
     "@testing-library/react": "^11.2.7",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^12.8.3",
-    "@types/react": "^17.0.2",
+    "@types/react": "^18.2.34",
     "@types/react-beautiful-dnd": "^13.1.4",
     "@types/react-dom": "^18.2.14",
     "@types/react-redux": "^7.1.25",

src/components/app-button/AppButton.tsx

@@ -1,10 +1,11 @@
-import { FC, ElementType } from 'react'
+import { FC, ElementType, ReactNode } from 'react'
 import Button, { ButtonProps } from '@mui/material/Button'
 
 import Loader from '~/components/loader/Loader'
 import { ButtonVariantEnum, SizeEnum } from '~/types'
 
 interface AppButtonProps extends ButtonProps {
+  children: ReactNode
   loading?: boolean
   disabled?: boolean
   component?: ElementType

src/components/app-card/AppCard.tsx

@@ -1,11 +1,12 @@
-import { FC } from 'react'
+import { FC, ReactNode } from 'react'
 import { Link } from 'react-router-dom'
 import Box, { BoxProps } from '@mui/material/Box'
 
 import { spliceSx } from '~/utils/helper-functions'
 import { styles } from '~/components/app-card/AppCard.styles'
 
 interface AppCardProps extends BoxProps {
+  children: ReactNode
   link?: string
   onClick?: () => void
 }

src/components/app-drawer/AppDrawer.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import Drawer, { DrawerProps } from '@mui/material/Drawer'
 import IconButton from '@mui/material/IconButton'
@@ -9,6 +9,7 @@ import useConfirm from '~/hooks/use-confirm'
 import { styles } from '~/components/app-drawer/AppDrawer.styles'
 
 interface AppDrawerProps extends DrawerProps {
+  children: ReactNode
   closeIcon?: boolean
   onClose: () => void
 }

src/components/enhanced-table/date-filter/DateFilter.jsx

@@ -1,16 +1,15 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { format } from 'date-fns'
-
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
+import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker'
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
 import Box from '@mui/material/Box'
 import TextField from '@mui/material/TextField'
 import IconButton from '@mui/material/IconButton'
 import ClearIcon from '@mui/icons-material/Clear'
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
-import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker'
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth'
-import { initialState, datePickersOptions } from './constants'
 
+import { initialState, datePickersOptions } from './constants'
 import { styles } from './DateFilter.styles'
 
 const DateFilter = ({ filter, setFilter, clearFilter }) => {
@@ -28,10 +27,6 @@ const DateFilter = ({ filter, setFilter, clearFilter }) => {
     setOpen((prev) => ({ ...prev, [direction]: true }))
   }
 
-  useEffect(() => {
-    return () => setOpen(null)
-  }, [])
-
   const endAdornment = (
     <IconButton
       className={filter.from || filter.to ? 'visible' : 'hidden'}

src/components/user-table/UserTable.jsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect } from 'react'
+import { useState, useCallback, useLayoutEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
@@ -93,11 +93,11 @@ const UserTable = ({
     clearSelected
   ])
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     void getData()
   }, [getData])
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     clearPage()
   }, [filters, rowsPerPage, clearPage, externalFilter])