Javascript 需要帮助在react中将道具从父元素传递到子元素吗

我正在使用storybook测试我正在制作的一些组件，在本例中是模态组件，但是我很难让包装器元素传递“open”值并回调到子模态

代码如下：

import { storiesOf } from '@storybook/react';
import React, { FC } from 'react';
import Modal from '.';
import { text, withKnobs } from '@storybook/addon-knobs/react';
import { Button } from '@material-ui/core';

const ModalParent: FC = ({ children }) => {
  const [isOpen, setOpen] = React.useState(false);

  const toggleIsOpen = () => {
    setOpen(!isOpen);
  };

  return <Button onClick={toggleIsOpen}>{children}</Button>;
};

storiesOf('PayTM Components', module)
  .addDecorator(withKnobs as any)
  .add('Modal', () => {
    const paragraph =
      'The structure of a paragraph parallels the structure of an essay in order as well as content. Both contain a coherent argument, supporting evidence/analysis, and a conclusion. Specifically, the contents of a paragraph are as follows: ... The topic sentence is usually the first or second sentence of a paragraph.';

    return (
      <ModalParent>
        <Modal opened={isOpen} toggle={toggleIsOpen}>
          {text('Modal Content', paragraph)}
        </Modal>
      </ModalParent>
    );
  });

从'@storybook/react'导入{storiesOf}；
从“React”导入React，{FC}；
从“.”导入模态；
从“@storybook/addonknobs/react”导入{text，withKnobs}；
从“@material ui/core”导入{Button}；
const ModalParent:FC=（{children}）=>{
常量[isOpen，setOpen]=React.useState（false）；
const toggleIsOpen=（）=>{
setOpen（！isOpen）；
};
返回{children}；
};
storiesOf（'PayTM组件'，模块）
.addDecorator（带任何旋钮）
.add（'Modal'，（）=>{
常量段=
“段落的结构在顺序和内容上与文章的结构相似。两者都包含连贯的论点、支持证据/分析和结论。具体而言，段落的内容如下：……主题句通常是段落的第一句或第二句。”；
返回(
{文本（'模态内容'，段落）}
);
});

但我得到的错误是，无法找到传递给Modal的“isOpen”和“toggleIsOpen”。我做错了什么