Создание пользовательского модала для таблицы материалов

Question

Я пытаюсь создать настраиваемую кнопку на моей таблице материалов, которая вызовет модель, которая позволит пользователям вносить изменения. Проблема, с которой я сталкиваюсь, состоит в том, что кнопка не переключается в истину при нажатии. Я использую нестандартный модальный крючок. Сам модал работает, потому что когда ему явно задано значение true, он появляется на экране

, вот модальный хук

const useModal = () => {
  const [isShowing, setIsShowing] = useState(false);

  function toggle() {
    setIsShowing(!isShowing);
  }

  return {
    isShowing,
    toggle,
  }
};

модальный компонент

const Modal = ({ isShowing, hide }) => isShowing ? ReactDOM.createPortal(
  <React.Fragment>
    <div className="modal-overlay"/>
    <div className="modal-wrapper" aria-modal aria-hidden tabIndex={-1} role="dialog">
      <div className="modal">
        <div className="modal-header">
          <button type="button" className="modal-close-button" data-dismiss="modal" aria-label="Close" onClick={hide}>
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <p>
          Hello, I'm a modal.
        </p>
      </div>
    </div>
  </React.Fragment>, document.body
) : null;

и, наконец, фактический компонент таблицы

columns: [
      { title: "Department", field: "department" },
      { title: "Security", field: "security", type: "numeric" },
      { title: "Status", field: "status" },
      {
        title: "Actions",
        field: "actions",
        render: rowData => (
          <div className="edit-button">
            <span className={" fas fa-pencil-alt"} onClick={toggle} />
            {console.log(isShowing)}
            <Modal isShowing={isShowing} hide={toggle} />
          </div>
        )
      }
    ],
    data: [{ department: "Admin", security: 10, status: "Active" }]
  });

  <MaterialTable
              title="Departments"
              columns={state.columns}
              data={state.data}
              editable={{
                onRowAdd: newData =>
                  new Promise(resolve => {
                    setTimeout(() => {
                      resolve();
                      setState(prevState => {
                        const data = [...prevState.data];
                        data.push(newData);
                        return { ...prevState, data };
                      });
                    }, 600);
                  })
              }}
            />

Мне нужен isShowing для переключения между истиной и ложью