I have the following ApolloProvider setup inside index.js in my React application. It's working fine connecting to the Apollo server.

import { React } from 'react';
import * as ReactDOM from 'react-dom/client';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import App from './App';
import { createHttpLink } from 'apollo-link-http';

const httpLink = createHttpLink({
    uri: 'http://localhost:5002'
})

const client = new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache()
})

export default (
    <ApolloProvider client = { client } >
        <App/>
    </ApolloProvider>
)
  
 const root = ReactDOM.createRoot(document.getElementById('root'));
  
  root.render(
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>,
  );

Now I need to decouple this I try to introduce a new Component called ApolloProvider inside a ApolloProvider.js:

import React from "react";
import App from "./App";
import { createHttpLink } from 'apollo-link-http';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

const httpLink = createHttpLink({
    uri: 'http://localhost:5002'
})

const client = new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache()
})

export default (
    <ApolloProvider client = { client } >
        <App/>
    </ApolloProvider>
)

Then I try to render like the following in index.js:

import ReactDOM from 'react-dom';
import ApolloProvider from './ApolloProvider';

ReactDOM.render(ApolloProvider, document.getElementById('root'));

But here I'm getting the following error

ReactDOM.render is no longer supported in React 18. Use createRoot instead.

I tried few syntaxes with createRoot still no clear path for this.