fix(main): change toast position and update reactDom

src/main.tsx

@@ -1,10 +1,11 @@
 import React, { ReactNode } from "react";
-import ReactDOM from "react-dom";
+import ReactDOM from "react-dom/client";
+
+import { BrowserRouter, Link } from "react-router-dom";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.min.css";
-import { BrowserRouter, Link } from "react-router-dom";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import Router from "./router";
 import { DSFRConfig } from "@dataesr/dsfr-plus";
@@ -32,12 +33,13 @@ const RouterLink = ({ href, replace, target, ...props }: RouterLinkProps) => {
   return <Link to={href} replace={replace} {...props} />;
 };
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <DataListProvider>
       <BrowserRouter>
         <DSFRConfig routerComponent={RouterLink}>
           <ToastContainer
+            position="bottom-right"
             toastStyle={{
               backgroundColor: "#dffee6",
               color: "#0078f3",
@@ -51,6 +53,5 @@ ReactDOM.render(
         </DSFRConfig>
       </BrowserRouter>
     </DataListProvider>
-  </React.StrictMode>,
-  document.getElementById("root")
+  </React.StrictMode>
 );