Why can't I interact with my components within my modal? - reactjs

Question

I am trying to create a modal and for some reason I cannot interact with any components like buttons or inputs within my modal.
I am building a React Portal, so that my modal and page are separate from each other and that the modal is not "running" in the background when it is not in use
import {useState, useLayoutEffect} from "react"
import { createPortal } from "react-dom"
const createWrapperAndAppendToBody = (wrapperId: string) => {
if(!document) return null
const wrapperElement = document.createElement("div")
wrapperElement.setAttribute('id', wrapperId)
document.body.appendChild(wrapperElement)
return wrapperElement
}
function ReactPortal({children, wrapperId}: {children: React.ReactElement; wrapperId: string}) {
const [wrapperElement, setWrapperElement] = useState<HTMLElement>()
useLayoutEffect(() => {
let element = document.getElementById(wrapperId)
let systemCreated = false
if(!element) {
systemCreated = true
element = createWrapperAndAppendToBody(wrapperId)
}
setWrapperElement(element!)
return () => {
if(systemCreated && element?.parentNode) {
element.parentNode.removeChild(element)
}
}
},[wrapperId])
if(!wrapperElement) return null
return createPortal(children, wrapperElement)
}
export default ReactPortal
I am pretty sure this is fine.
import React, {useEffect} from "react";
import ReactPortal from "./ReactPortal";
interface ConfirmationModalProps {
isOpen: boolean;
handleClose: () => void
children: React.ReactNode
}
export const ConfirmationModal =({children, isOpen, handleClose}:ConfirmationModalProps) => {
//allows to press Escape Key
useEffect(() => {
const closeOnEscapeKey = (e: KeyboardEvent) =>
e.key === 'Escape' ? handleClose() : null
document.body.addEventListener('keydown', closeOnEscapeKey)
return () => {
document.body.removeEventListener('keydown', closeOnEscapeKey)
};
},[handleClose])
//stops scrolling fuction when modal is open
useEffect(() => {
document.body.style.overflow = 'hidden';
return (): void => {
document.body.style.overflow = 'unset'
}
},[isOpen])
if(!isOpen) return null
return (
<ReactPortal wrapperId='react-portal-modal-container'>
<>
<div className='fixed top-0 left-0 w-screen h-screen z-40 bg-neutral-800 opacity-50' />
<div className='fixed rounded flex flex-col box-border min-w-fit overflow-hidden p-5 bg-zinc-800 inset-y-32 inset-x-32'>
<button className='py-2 px-8 self-end font-bold hover:bg-violet-600 border rounded'
onClick={() => console.log('Pressed')}>
Close
</button>
<div className='box-border h-5/6'>{children}</div>
</div>
</>
</ReactPortal>
)
}
This is my reusable Modal component so that I do not have to build a new modal from scratch. The close button within here is no also not working/can't event click on it via a console.log('pressed')
Here is a picture of the modal, but none of the buttons work, however, my Escape key function does work. Any thoughts would be great!