Datepicker calendar is not showing for React 18

[codewarrior415]

I've created a simple application in React 18 using create-react-app. Added EuiDatePickerRange component which I get from
https://codesandbox.io/s/competent-star-5ipxyl?file=/index.js:109-150 example. I noticed that the calendar does not show up. I verified this by downgrading to react 17 and it works fine.

Here is my package.json
{ "name": "my-app", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/node": "^16.18.6", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", "@elastic/datemath": "^5.0.3", "@elastic/eui": "70.4.0", "@emotion/cache": "^11.10.3", "@emotion/css": "^11.10.0", "@emotion/react": "^11.10.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "typescript": "^4.9.3", "web-vitals": "^2.1.4", "moment": "^2.24.0", "moment-timezone": "^0.5.34" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

[cee-chen]

This is covered by #6182 - EUI does not yet support React 18 and all components that make use of portals will not yet work on it.

[codewarrior415]

Actually, I figured it out. The issue was <React.StrictMode> If you take out strict mode, it works great.