React: cloneElement()でchildrenに渡したpropsの、children側での型定義について

Question

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

  const childrenWithProps = React.Children.map(children, child => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { setIsOpen });
    }
    return child;
  });
  return (
    <>
      <Modal open={isOpen} />
      {childrenWithProps}
    </>
  );
};

type ChildProps = {setIsOpen: React.Dispatch<React.SetStateAction<boolean>>}
const Child:React.VFC<ChildProps> = (props) => {
  return (
    <>
      <button onClick={props.setIsOpen(true)}>開く</button>;
      <button onClick={props.setIsOpen(false)}>閉じる</button>;
    </>
};

const App = () => {
  return (
      <Parent>
        <Child />
      </Parent>
  );
}

上記コードにおいて、Childコンポネントで指定しているChildProps型をanyに変更すると、Childコンポネント上の開く・閉じるボタンを押すことで Parentコンポネント上のモーダルを開閉することはできるため、reactの実装としては問題ないように思えます。
しかし、ChildProps型を上記コードのように指定すると、App.tsxで<Child />にsetIsOpenが渡されていないためエラーとなってしまいます。

どのような型定義をすればよいでしょうか？もしくは実装パターンが間違っているのでしょうか？

実装時はParentコンポネントを大量に使用したいと考えています。
よって可能であれば、子コンポネント側で都度setIsOpenあたりをいじらなくてもよいような方法を模索しているのですが、良いアイデアないでしょうか？

---

追記

私が考えたワークアラウンドとしては

type ChildComponent<T> = (props: T & {setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>} => JSX.Element
const Child: ChildComponent<PropsWithoutSeTIsOpen> = (props) => {
  return (
    <>
      <button onClick={props.setIsOpen!(true)}>開く</button>;
      <button onClick={props.setIsOpen!(false)}>閉じる</button>;
    </>
};

とすることで型エラーも解消し、機能もしたのですがいかんせんprops.setIsOpen!が気持ち悪いなというところです。

Comments

[hoshi-takanori]

Child の setIsOpen にデフォルト値を設定すれば良いのでは。
https://qiita.com/shate/items/bd52e1a09c30f1bff4ca

[退会済みユーザー]

ご回答いただき有難うございます。
仰る通りdefaultPropsにダミー関数を渡すことでtypeエラーは解決いたしました。
こちらの不手際で質問内容に背景を掲載していなかったので追記いたしました。

Answer 1

type ChildComponent<T> = (props: T & {setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>} => JSX.Element
const Child: ChildComponent<PropsWithoutSeTIsOpen> = (props) => {
return (
<>
<button onClick={props.setIsOpen!(true)}>開く</button>;
<button onClick={props.setIsOpen!(false)}>閉じる</button>;
</>
};