【React】state管理、providerを用いてcomponentに関数を渡して使えるようにしたい【モーダル】

Question

前提

React初学者です。
Reactで遷移を伴わない1枚完結のモーダルを使用したSPAを作っています。
providerを用いたモーダル開閉機能を実装しているのですが、stateの受け渡しが上手くできず、モーダルウィンドウの閉じるボタンをコンポーネント上に作成できず困っています。
拙い質問で恐縮ではございますが、ご回答いただけますと幸いでございます。宜しくお願い致します。

実現したいこと

• [ ]下記「ModalContentAdd.jsx」コンポーネントに記載のclassName="modalCloser"部にて実装したonClickのmodalCloseを走るようにしたい。

該当ファイル階層

発生している問題・エラーメッセージ

• props及びproviderでの関数の受け渡しが上手くできていない。原因不明。現状コンソールには下記warningが発生します。

Warning: The `value` prop is required for the `<Context.Provider>`. Did you misspell it or forget to pass it?
    at ModalCloseFlagProvider (http://localhost:3000/static/js/bundle.js:1093:5)
    at ul
    at div
    at SidebarAction (http://localhost:3000/static/js/bundle.js:125:88)
    at div
    at Sidebar
    at div
    at App

該当のソースコード

import React from 'react'
import {SidebarData} from './data/SidebarData'
import SidebarIcon from './atoms/SidebarIcon'
import SidebarAction from './SideBarAction'

export const Sidebar = () => {
  return (
    <div className="Sidebar">
      <ul className="SidebarList">
        {SidebarData.map((value, key) => {
          return (
            <li
              key={key}
              id={window.location.pathname == value.link ? "active" : ""}//選択中の酒にactive付与
              className="row"
              onClick={() =>{
                window.location.pathname = value.link;
              }}
            >
              <SidebarIcon />
              <div className="SidebarTitle">{value.title}</div>
            </li>
          )
        })}
      </ul>
      <SidebarAction />
    </div>
  )
};

export default Sidebar

//react
import React, {useState} from 'react';

//components
import ModalBtn from "./atoms/ModalBtn";
import Modal from "./block/Modal";

//provider
import {ModalCloseFlagProvider} from "./providers/ModalCloseFlagProvider";


const SidebarAction = () => {

  //モーダル関連フラグ
  const [isModalOpen, setIsModalOpen] = useState(false); //モーダルの表示状態
  const [modalSelect, setModalSelect] = useState(""); //モーダルの中身の振り分け
  const [modalScroll, setModalScroll] = useState(0); //モーダルを開いた時のスクロール値を取っておく

  //モーダルを開く
  const modalOpen = (taregt) => {
    setIsModalOpen(true);
    setModalSelect(taregt);
    setModalScroll(window.scrollY);
    let body = document.getElementsByTagName("body");
    body[0].style.top = -window.scrollY + "px";
    body[0].classList.add("is-fixed");
  };

  //モーダルを閉じる
  const modalClose = () => {
    setIsModalOpen(false);
    let body = document.getElementsByTagName("body");
    body[0].style.top = "0px";
    body[0].classList.remove("is-fixed");
    window.scrollTo(0, modalScroll);
    setModalScroll(0);
  };

  return (
    <div className='SidebarAction'>
      <ul className='ActionList'>
        <li id="add" className='Action'>
          <ModalBtn title="追加" onClick={() => modalOpen("modal-1")} />
        </li>
        <li id="delete" className='Action'>
          <ModalBtn title="削除" onClick={() => modalOpen("modal-2")} />
        </li>
        {/* ↓はContextオブジェクトの参照元としてpropsにて送られる大元 */}
        <ModalCloseFlagProvider>
          <Modal
            modalStatus={isModalOpen}
            modalContent={modalSelect}
            onClick={modalClose}
          />
        </ModalCloseFlagProvider>
      </ul>
    </div>
  );
}
export default SidebarAction;

// react
import React from "react";

// provider
import { IconContext } from "react-icons";
import { MdClose } from "react-icons/md";

// component
import ModalContent from "../modules/ModalContent";

export const Modal = (props) => {

  return (
    <div className={props.modalStatus ? "modal is-active" : "modal"}>
      <div className="modal-inner">
        <div className="modal-close">
          <IconContext.Provider value={{ size: "20px" }}>
            <MdClose />
          </IconContext.Provider>
        </div>
        <div className="modal-content">
          <ModalContent modalId={props.modalContent} />
        </div>
      </div>
    </div>
  );
};
export default Modal;

//react
import React from 'react'
import { useContext } from 'react';
import { MdClose } from "react-icons/md";

//provider
import {ModalCloseFlagContext} from "../providers/ModalCloseFlagProvider";
// import {IconContext} from "react-icons";

export const AddModal = () => {

  // Context内のmodalCloseを取得(モーダルを閉じる関数)
  const modalClose = useContext(ModalCloseFlagContext);

  return (
    <div className="modalWindow">
      <div className="modalHeader">
        <div className="modalCloser" onClick={modalClose}>
          <MdClose />
        </div>
        <h4>追加</h4>
      </div>
      <p className="modalTitle">追加モーダルのDOMだよおおおおおおおおおおお</p>
    </div>
  )
}

export default AddModal;

import { createContext } from "react";

export const ModalCloseFlagContext = createContext({});

export const ModalCloseFlagProvider = props => {
  // propsとしてモーダル関連フラグを受け取る
  const {children} = props;

  // モーダルを閉じる関数をpropsから参照
  const modalCloseFunction = () => {
    props.onClick();
  };

  //モーダルクローズフラグ
  const modalClose = modalCloseFunction;

  // ModalCloseFlagContextの中にproviderがあるので、それでchildrenを囲む
  // valueの中にグローバルに扱う実際の値を設定
  return(
    <ModalCloseFlagContext.Provider onClick={modalClose}>
      {children}
    </ModalCloseFlagContext.Provider>
  );
};

試したこと

プロバイダに直接親で宣言した変数を書き直すなどして試したのですが結果は変わらずでした。

補足情報（FW/ツールのバージョンなど）

すべて最新バージョンです。