refactor: fix all linting errors from eslint

src/frontend/src/App.jsx

@@ -1,3 +1,4 @@
+import axios from 'axios';
 import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { RouterProvider } from 'react-router-dom';
@@ -28,6 +29,33 @@ console.error = function filterWarnings(msg, ...args) {
   }
 };
 
+const GlobalInit = () => {
+  useEffect(() => {
+    axios.interceptors.request.use(
+      (config) => {
+        // Do something before request is sent
+
+        const urlIsExcluded = excludedDomains.some((domain) => config.url.includes(domain));
+
+        if (!urlIsExcluded) {
+          config.withCredentials = true;
+        }
+
+        return config;
+      },
+      (error) =>
+        // Do something with request error
+        Promise.reject(error),
+    );
+
+    axios.defaults.withCredentials = true;
+
+    return () => {};
+  }, []);
+
+  return null; // Renders nothing
+};
+
 const SentryInit = () => {
   useEffect(() => {
     if (import.meta.env.MODE === 'development') {
@@ -107,6 +135,7 @@ ReactDOM.render(
   <Provider store={store}>
     <PersistGate loading={null} persistor={persistor}>
       <RouterProvider router={routes} />
+      <GlobalInit />
       <MatomoTrackingInit />
       <SentryInit />
     </PersistGate>

src/frontend/src/components/MapComponent/OpenLayersComponent/MapContainer/index.jsx

@@ -34,4 +34,6 @@ MapContainer.propTypes = {
   mapInstance: PropTypes.oneOfType([PropTypes.object, PropTypes.number]),
 };
 
+MapContainer.displayName = 'MapContainer';
+
 export default MapContainer;

src/frontend/src/components/ProjectInfo/ProjectInfoCountCardSkeleton.jsx

@@ -11,7 +11,7 @@ const ProjectInfoCountCardSkeleton = () => {
       }}
     >
       {Array.from({ length: 3 }).map((i) => (
-        <div id={i}>
+        <div key={i} id={i}>
           <CoreModules.Skeleton sx={{ bgcolor: 'grey.900' }} variant="rectangular" width={250} height={128} />
         </div>
       ))}

src/frontend/src/components/createnewproject/SelectForm.tsx

@@ -118,7 +118,7 @@ const SelectForm = ({ flag, geojsonFile, customFormFile, setCustomFormFile }) =>
                   >
                     tags
                   </a>{' '}
-                  that match the selected category in OSM database, if you don't choose to upload custom data extract.
+                  {`that match the selected category in OSM database, if you don't choose to upload custom data extract.`}
                 </p>
               </div>
               <RadioButton

src/frontend/src/components/organisation/OrganisationAddForm.tsx

@@ -167,7 +167,11 @@ const OrganisationAddForm = () => {
                 // dispatch(CreateProjectActions.SetProjectDetails({ key: 'organisation', value: e.target.value }))
               }}
             >
-              {organisationDataList?.map((org) => <MenuItem value={org.value}>{org.label}</MenuItem>)}
+              {organisationDataList?.map((org) => (
+                <MenuItem key={org.value} value={org.value}>
+                  {org.label}
+                </MenuItem>
+              ))}
             </Select>
           </CoreModules.Stack>
           {errors.type && (

src/frontend/src/hooks/useForm.tsx

@@ -59,8 +59,6 @@ const useForm = (initialState, callback, validate) => {
   useEffect(() => {
     setValues(initialState);
     setErrors({});
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialState]);
 
   return {

src/frontend/src/utilities/CustomizedModal.tsx

@@ -25,6 +25,7 @@ const Backdrop = React.forwardRef<HTMLDivElement, { open?: boolean; className: s
   const { open, className, ...other } = props;
   return <div className={clsx({ 'MuiBackdrop-open': open }, className)} ref={ref} {...other} />;
 });
+Backdrop.displayName = 'ModalBackdrop';
 
 const StyledModal = styled(Modal)`
   position: fixed;

src/frontend/src/views/NotFound404.jsx

@@ -12,7 +12,7 @@ const NotFoundPage = () => {
       p={3}
     >
       <CoreModules.Typography mt={'9%'} style={{ wordWrap: 'break-word' }} variant="subtitle2">
-        The page you were looking for doesn't exist.
+        {`The page you were looking for doesn't exist.`}
       </CoreModules.Typography>
       <CoreModules.Typography style={{ wordWrap: 'break-word' }} variant="h3">
         You may have mistyped the address or the page may have moved.

src/frontend/src/views/Submissions.tsx

@@ -100,6 +100,7 @@ const Submissions = () => {
               const formattedDate = date.toLocaleDateString('en-US', dateOptions);
               return (
                 <CoreModules.Box
+                  key={submission.id}
                   sx={{
                     display: 'flex',
                     alignItems: 'center',

src/frontend/src/views/Tasks.tsx

@@ -235,6 +235,7 @@ const TasksSubmission = () => {
               const formattedDate = date.toLocaleDateString('en-US', dateOptions);
               return (
                 <CoreModules.Link
+                  key={submission.id}
                   style={{ textDecoration: 'auto' }}
                   className="submission-item"
                   to={`/project/${encodedProjectId}/tasks/${encodedTaskId}/submission/${submission.instanceId}`}