Update ReactDOM.render to createRoot in index.js and React dependencies for React 18+ compatibility

[chigwell]

User Story
As a software developer,
I want to update the deprecated ReactDOM.render method to createRoot in our React application
so that the application can leverage React 18+ features like concurrent rendering and remains compatible with future updates.

Background
React 18 deprecated ReactDOM.render in favor of createRoot to enable concurrent rendering capabilities. The current implementation in frontend/src/index.js uses the outdated method, which may block upgrades to newer React versions and prevent the use of modern features. The frontend’s package.json currently specifies React 17.0.2, so dependencies will also need updating to React 18+. Failing to address this could lead to technical debt and compatibility issues. The Docker setup for the frontend mounts the src directory, so changes to index.js will reflect without a full rebuild.

Acceptance Criteria

• Modify frontend/src/index.js to replace ReactDOM.render with createRoot as per React 18+ syntax.
• Update react and react-dom versions in frontend/package.json to at least 18.2.0.
• Ensure the React application renders correctly after the update, with no console errors or warnings.
• Validate that the Docker-mounted volume for frontend/src reflects the changes without requiring a full container rebuild.
• Confirm the API fetch in frontend/src/App.js still successfully retrieves data from the backend after the update.
• Test the application by running npm start locally and via docker-compose up to verify consistent behavior.

[veenaskumar]

can i take the issues?

[chigwell]

@veenaskumar sure