I want to create a react Portal component - reactjs

Question

We are using react.
I want to create a Portal component and enclose a Drawer component in the Portal component.
I have created a Poratl component, but the following error occurs.
I don't know how to solve this problem.
errorMesssage
_react.default.createPortal is not a function
code
import ReactDOM from "react";
import createPortal from "react-dom";
export const Portal = ({ children }) => {
const el = document.getElementById("portal");
return ReactDOM.createPortal(children, el);
};
import React from "react";
import styled from "styled-components";
import { Portal } from "./Portal";
type Props = {
isOpen: boolean;
children: React.ReactNode;
onClose: () => void;
};
export const Drawer = (props: Props) => {
return (
<Portal>
<Overlay isOpen={props.isOpen} onClick={props.onClose} />
<DrawerModal {...props}>{props.children}</DrawerModal>
</Portal>
);
};
const DrawerModal = styled.div<Props>`
position: absolute;
overflow: scroll;
top: 0;
right: 0;
height: 100vh;
width: ${({ isOpen }: Props) => (isOpen ? 400 : 0)}px;
background: #ffffff;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
transition: 200ms cubic-bezier(0.25, 0.1, 0.24, 1);
`;
const Overlay = styled.div<{ isOpen: boolean }>`
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: ${(props: { isOpen: boolean }) => (props.isOpen ? 0 : -1)};
`;

Answer 1

Try import ReactDOM from 'react-dom'; instead of import ReactDOM from 'react';
import ReactDOM from 'react-dom'; // Update this line
export const Portal = ({ children }) => {
const el = document.getElementById("portal");
return ReactDOM.createPortal(children, el);
};