Javascript 故事书中未显示模态

我有一个工作模式的组成部分，我需要显示在故事书以及。这取决于道具 展示并关闭。例如，如果我需要显示模态，我必须执行以下操作

const Demo = () => {
    const [open, setOpen] = useState(false)
    return (
        <>
            <button onClick={() => setOpen(true)}>Open Modal</button>
            <Modal open={open} onClose={() => setOpen(false)}>
                <Modal.Header>Modal Header goes here</Modal.Header>
                <Modal.Content>Modal Content goes here</Modal.Content>
                <Modal.Footer>Modal Footer goes here</Modal.Footer>
            </Modal>
        </>
    )
}

const Demo=（）=>{
const[open，setOpen]=useState（false）
返回(
setOpen（true）}>打开模式
setOpen（false）}>
模态头在这里
模态内容在这里
模态页脚在这里
)
}

我正在使用ReactDOM.createPortal来呈现模态，因此为此我创建了一个id为的div元素 模态，在模态出现的位置创建另一个div元素。为此，我创造了一个 莫代尔的故事如下

storiesOf('Modals', module)
  .addDecorator(storyFn => (
    <>
      <div id="modal">
        <div>{storyFn()}</div>
      </div>
    </>
  ))
  .addDecorator(withKnobs)
  .add('Modals - Basic', () => (
    <>
      <button type="button">Show Modal</button>
      <Modal open={boolean('open', false)}>
        <Modal.Header>Modal Header goes here</Modal.Header>
        <Modal.Content>Modal Content goes here</Modal.Content>
        <Modal.Footer>Modal Footer goes here</Modal.Footer>
      </Modal>
    </>
  ))

storiesOf（'Modals'，module）
.addDecorator（故事fn=>(
{storyFn（）}
))
.addDecorator（带旋钮）
.add（'Modals-Basic'，（）=>(
显示模态
模态头在这里
模态内容在这里
模态页脚在这里
))

我的模态是通过以下方式创建的

const el = document.createElement('div')
const modal = document.getElementById('modal')

return ReactDOM.createPortal(
    <>
      <Backdrop onClick={e => closeModal(e)}>
        <ModalBox>
          <Wrapper position={position} {...props}>
            {children}
            <CloseIcon icon={faTimesCircle} />
          </Wrapper>
        </ModalBox>
      </Backdrop>
    </>,
    el,
  )

const el=document.createElement（'div'））
const modal=document.getElementById（'modal'）
返回ReactDOM.createPortal(
关闭模式（e）}>
{儿童}
,
埃尔，
)