Feature/update dependency mui to v5.x (#332)

* Update dependency "mui" to v5.x

Update to v5.13.3

Fixes issue of "SxProps" not being exported by "@mui/material"

* Update dependency "mui" to v5.x - Fix grid item size

Update to v5.13.3

Fixes issue of "SxProps" not being exported by "@mui/material"

* Update dependency "mui" to v5.x - Replace "ListItem" with "ListItemButton"

* Update dependency "mui" to v5.x - Fix tsc issue

* Update dependency "mui" to v5.x - Prevent reader white screen

Due to "initialChapter" being a function returning an object, it causes a re-render everytime due to it (the object) being used as a dependency.
This caused a white screen when skipping to the previous or next chapter

src/screens/Reader.tsx

@@ -79,13 +79,13 @@ const getReaderComponent = (readerType: ReaderType) => {
 };
 
 const range = (n: number) => Array.from({ length: n }, (value, key) => key);
-const initialChapter = () => ({
+const initialChapter = {
     pageCount: -1,
     index: -1,
     chapterCount: 0,
     lastPageRead: 0,
     name: 'Loading...',
-});
+};
 
 export default function Reader() {
     const { t } = useTranslation();
@@ -103,7 +103,7 @@ export default function Reader() {
         } as IMangaCard | IManga,
         isLoading: isMangaLoading,
     } = requestManager.useGetManga(mangaId);
-    const { data: chapter = initialChapter(), isLoading: isChapterLoading } = requestManager.useGetChapter(
+    const { data: chapter = initialChapter, isLoading: isChapterLoading } = requestManager.useGetChapter(
         mangaId,
         chapterIndex,
     );

src/screens/settings/Backup.tsx

@@ -8,7 +8,6 @@
 
 import React, { useContext, useEffect } from 'react';
 import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import { fromEvent } from 'file-selector';
 import makeToast from 'components/util/Toast';
@@ -16,6 +15,7 @@ import ListItemLink from 'components/util/ListItemLink';
 import NavbarContext from 'components/context/NavbarContext';
 import { useTranslation } from 'react-i18next';
 import requestManager from 'lib/RequestManager';
+import { ListItemButton } from '@mui/material';
 
 export default function Backup() {
     const { t } = useTranslation();
@@ -75,12 +75,12 @@ export default function Backup() {
                         secondary={t('settings.backup.label.create_backup_info')}
                     />
                 </ListItemLink>
-                <ListItem button onClick={() => document.getElementById('backup-file')?.click()}>
+                <ListItemButton onClick={() => document.getElementById('backup-file')?.click()}>
                     <ListItemText
                         primary={t('settings.backup.label.restore_backup')}
                         secondary={t('settings.backup.label.restore_backup_info')}
                     />
-                </ListItem>
+                </ListItemButton>
             </List>
             <input type="file" id="backup-file" style={{ display: 'none' }} />
         </>