Instantsearch not working with React - Data not displaying

Question

I have my instantsearch which is working perfectly fine when i run it as is as shown below

However, when I tried to integrate it wit router dom, it seems something on the router dom is causing my instantsearch results to not be rendered. my instant search is being deployed inside the

App.js
import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import HomePage from "./pages";
import HiringHomePage from "./pages/hiring";
import TelentHomePage from "./pages/telent";




const App = () => {
  return (
    <Router>
      <Routes>
        {/* Routes from telent */}
        <Route path="/" element={<HomePage />} />
        <Route path="/dashboard/telent" element={<TelentHomePage />} />
        <Route path="/dashboard/telent/findwork" element={<TelentHomePage />} />
        {/* Routes for hiring */}
        <Route path="/dashboard/hire" element={<HiringHomePage />} />
        <Route path="/dashboard/hire/discover" element={<HiringHomePage />}/>
        <Route path="/dashboard/hire/discover/profile-description" element={<HiringHomePage />}/>
      </Routes>
    </Router>
  );

Discover.js

import "instantsearch.css/themes/algolia-min.css";
import instantsearch from 'instantsearch.js';
import {
  InstantSearch,
  Hits,
  SortBy,
  SearchBox,
  Pagination,
  Highlight,
  ClearRefinements,
  RefinementList,
  Configure,
  Snippet
} from "react-instantsearch-dom";
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';
import algoliasearch from 'algoliasearch/lite';

const searchClient = instantMeiliSearch(
  "xxx",
  "xxx"
);


const Discover = () => (
  <InstantSearch searchClient={searchClient} indexName="gurucool_dev">
    <SearchBox />
    <Hits />
  </InstantSearch>
);




export default Discover;

Any idea why this is happening?

Answer 1

Managed to resolve it. This is the right code.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container);
createRoot(document.getElementById('root')).render(<App> App</App>)


reportWebVitals();

Formerly it was

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. 
reportWebVitals();