Not working properly on react and react-dom v-18

[Ripon876]

I initialized a react project and tried to use elastic ui, I copied and pasted the same code for flyout , it shows the Show layout button but when I click the button I got this error and can't see the flyout

React does not recognize the gapModeprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasegapmodeinstead. If you accidentally passed it from a parent component, remove it from the DOM element](rning: React does not recognize thegapModeprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercasegapmode instead. If you accidentally passed it from a parent component, remove it from the DOM element.

then I copied the Header example from "Header links" section , but I am not able to view the nav links on mobile version after clicking the button on mobile view.

After spending some time, i came up with a solution not the best one but at least able to got it worked. I changed the render method to the old one of my react app in index.js file from this

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "@elastic/eui/dist/eui_theme_dark.css";
import { EuiProvider } from "@elastic/eui";

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

to this

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "@elastic/eui/dist/eui_theme_dark.css";
import { EuiProvider } from "@elastic/eui";

ReactDOM.render(
  <React.StrictMode>
    <EuiProvider colorMode="dark">
      <App />
    </EuiProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

now I can see the flyout if I click on "Show flyout" button. The createRoot method is a new API introduced in React 18 which enables concurrent rendering by default, allowing components to be rendered incrementally and improving the overall performance of the application. But i can't use it if i want to use elastic ui 😐😐

[cee-chen]

Hey Ripon - React 18 is something we're aware that doesn't work yet with EUI, and it's on our roadmap for this year to resolve in the next few months here.

For now, the portal/flyout issues you're seeing will likely be resolved by removing strict mode (#6179) in React 18. The gapMode error you're seeing is unrelated and not creating any major rendering errors (it occurs on 17 as well and is coming from our 3rd party focus trap library).

I'm closing this issue in the interim as a duplicate of #6182, but please feel free to follow up in that issue with any other new problems you run into, or track it to receive a notification for when EUI resolves React 18 support.