How to open component in a new window on button click?

I am new to react. I am working on a project where I have to show a whiteboard and draw on it. I want to open the whiteboard when a menu is clicked and on that window I will draw. How can I do that?

Here is my code:

This is my component for showing menu.

Menu.tsx

export default function Menu(props: { buttonClassName?: string }) {
     const [showWindowPortal, setWindowPortal] = useState(false);
     const anchorRef = useRef<HTMLButtonElement>(null);

    useEffect(() => {
          window.addEventListener('beforeunload', () => {
          setWindowPortal(false);
  });
});

 return (
<>
  <Button onClick={() => setMenuOpen(isOpen => !isOpen)} ref={anchorRef} className= 
    {props.buttonClassName}>
    {isMobile ? (
      <MoreIcon />
    ) : (
      <>
        <span style={{ color: '#fff' }}>Settings</span>
        <span style={{ color: '#fff', paddingTop: '7px' }}>
          <ExpandMoreIcon />
        </span>
      </>
    )}
  </Button>
  <MenuContainer
    open={menuOpen}
    onClose={() => setMenuOpen(isOpen => !isOpen)}
    anchorEl={anchorRef.current}
    anchorOrigin={{
      vertical: 'top',
      horizontal: 'left',
    }}
    transformOrigin={{
      vertical: isMobile ? -55 : 'bottom',
      horizontal: 'center',
    }}
  >
    <MenuItem
      onClick={() => {
        setWindowPortal(true);
      }}
    >
      <Typography variant="body1">Whiteboard</Typography>
    </MenuItem>
  </MenuContainer>
    {showWindowPortal &&(
    <Container
      open={showWindowPortal}
      onClose={() => {
        setSettingsOpen(false);
        setMenuOpen(false);
      }}
    ></Container>
    )}
</>
);
}

I want to show below component in a new window when I click the menu.

Container.tsx

function Container({ open, onClose }: { open: boolean; onClose: () => void},props:any) {
     const classes = useStyles();
     const [color, setColor] = useState('#000000');
     const [size, setSize] = useState(5);
    const [domReady, setDomReady] = useState(false);
    let containerEl:any ;
     let externalWindow:any ;
  

     useEffect(() => {
      externalWindow = window.open('', '', 'width=600,height=400,left=200,top=200');
      containerEl = externalWindow.document.createElement('div');
      externalWindow.document.body.appendChild(containerEl);

       externalWindow.document.title = 'A React portal window';
       setDomReady(true);
       externalWindow.addEventListener('beforeunload', () => {
      //props.closeWindowPortal();
    });

    return ()=>{
      externalWindow.close();
    }
  });

       function changeColor(e: any) {
           setColor(e.target.value);
     }

       function changeSize(e: any) {
            setSize(e.target.value);
      }

          if (!containerEl) {
              return null;
          }
  
   return domReady? createPortal(<div className="container">Hello</div>
      ,containerEl):null;  
  
--------I want to show the below to the new window ---------------------
  return (
    <Dialog open={open} onClose={onClose} classes={{ paper: classes.container }}>
      <div className="container">
        <div className="tools-section">
          <div className="color-picker-container">
            Select Brush Color : &nbsp;
            <input type="color" value={color} onChange={changeColor} />
          </div>

          <div className="brushsize-container">
            Select Brush Size : &nbsp;
            <select value={size} onChange={changeSize}>
              <option> 5 </option>
              <option> 10 </option>
              <option> 15 </option>
              <option> 20 </option>
              <option> 25 </option>
              <option> 30 </option>
            </select>
          </div>
        </div>

        <div className="board-container">
          <Board color={color} size={size}></Board>
        </div>
      </div>
    </Dialog>
  );
}
export default Container;