update code to match latest version of REACT

Author: sebsto

vscode-extension/webview-ui/src/context/ConfigurationProvider.tsx

@@ -14,7 +14,7 @@
 //===----------------------------------------------------------------------===//
 
 /* eslint-disable indent */
-import React, { createContext, useState, useEffect } from "react";
+import React, { createContext, useState, useEffect, PropsWithChildren } from "react";
 import { vscode } from "../utilities/vscode";
 
 /**
@@ -64,7 +64,7 @@ export const ConfigurationContext = createContext<{
  * Manages the application configuration state and provides it to the context.
  * @param children The child components wrapped by the provider.
  */
-export const ConfigurationProvider: React.FC = ({ children }) => {
+export const ConfigurationProvider: React.FC<PropsWithChildren> = ({ children }) => {
   // Initial configuration state
   const initialConfig: Configuration = {
     projectName: "",

vscode-extension/webview-ui/src/index.tsx

@@ -21,6 +21,8 @@ import i18next from "i18next";
 import global_en from "./i18n/en/global.json";
 import { I18nextProvider } from "react-i18next";
 import { ErrorProvider } from "./context/ErrorProvider";
+import { createRoot } from 'react-dom/client';
+
 
 /**
  * Initialize i18next and set up localization resources.
@@ -40,15 +42,22 @@ i18next.init({
  * The root component of the application.
  * @returns {JSX.Element} The rendered root component.
  */
-ReactDOM.render(
-  <React.StrictMode>
-    <ErrorProvider>
-      <I18nextProvider i18n={i18next}>
-        <ConfigurationProvider>
-          <App />
-        </ConfigurationProvider>
-      </I18nextProvider>
-    </ErrorProvider>
-  </React.StrictMode>,
-  document.getElementById("root"),
-);
+// Find your root element
+const container = document.getElementById('root');
+
+// Create a root
+if (container) {
+  const root = createRoot(container);
+
+  root.render(
+    <React.StrictMode>
+      <ErrorProvider>
+        <I18nextProvider i18n={i18next}>
+          <ConfigurationProvider>
+            <App />
+          </ConfigurationProvider>
+        </I18nextProvider>
+      </ErrorProvider>
+    </React.StrictMode>
+  );
+}