import React, { ReactNode } from 'react';
import { createPortal } from 'react-dom';
import { Paper } from '@mui/material';
import { styled } from '@mui/system';

interface IProps {
  children: ReactNode;
}
interface IState {}

const DPaper = styled(Paper)(() => ({}));

const AppPortal = (props: IProps, state: IState) => {
  const { children } = props;

  return createPortal(
    <DPaper>{children}</DPaper>,
    document.getElementById('portal') as HTMLElement,
  );
};

export default AppPortal;