refactor: migrate to createRoot and update image paths

Author: anyulled

src/assets/images/FaqsImage0.jpg public/images/FaqsImage0.jpgsrc/assets/images/FaqsImage0.jpg renamed to public/images/FaqsImage0.jpg

@@ -8,15 +8,15 @@ import {
 } from "react-router";
 import App from "./App";
 import React, { useEffect } from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import reportWebVitals from "./reportWebVitals";
 import ReactGa from "react-ga";
 import * as Sentry from "@sentry/react";
 import Loading from "./components/Loading/Loading";
 
-const tracking_ID =
+const trackingID =
   process.env.REACT_APP_GOOGLE_ANALYTICS_API_KEY ?? "G-0BG1LNPT11";
-ReactGa.initialize(tracking_ID);
+ReactGa.initialize(trackingID);
 
 Sentry.init({
   dsn: "https://[email protected]/4504348314435584",
@@ -34,15 +34,18 @@ Sentry.init({
   release: "devBcn@" + process.env.npm_package_version,
 });
 
-ReactDOM.render(
+const rootElement = document.getElementById("root");
+if (!rootElement) throw new Error("Failed to find the root element");
+const root = createRoot(rootElement);
+
+root.render(
   <React.StrictMode>
     <React.Suspense fallback={<Loading />}>
       <BrowserRouter>
         <App />
       </BrowserRouter>
     </React.Suspense>
   </React.StrictMode>,
-  document.getElementById("root"),
 );
 
 // If you want to start measuring performance in your app, pass a function

src/assets/images/FaqsImage1.jpg public/images/FaqsImage1.jpgsrc/assets/images/FaqsImage1.jpg renamed to public/images/FaqsImage1.jpg

@@ -20,7 +20,7 @@ const FaqCard: FC<React.PropsWithChildren<FaqCardType>> = ({ faq, index }) => {
         <Suspense fallback={<StyledLoadingImage src={Logo} />}>
           <StyledFaqImage
             alt={`DevBcn — image ${index}`}
-            src={require(`../../../../../assets/images/FaqsImage${index}.jpg`)}
+            src={`/images/FaqsImage${index}.jpg`}
           />
         </Suspense>
       </StyledFaqImageContainer>