I can see that modalOpen turns true. But, it does not open the Sliding Pane. How can I make this open when I click the button on App.js?

— Modal.js

import { create } from "zustand";

type store = {
  modalOpen: boolean;
  openCloseModal: (modalOpen: store["modalOpen"]) => void;
  closeModal: () => void;
};


const useModalStore = create<store & action>((set) => ({
  modalOpen: false,
  openCloseModal: (modalOpen) => set(() => ({ modalOpen: !modalOpen })),
  closeModal: () => set(() => ({ modalOpen: false })),
}));

export default useModalStore;

— App.js

  const modalOpen = useModalStore((useModalStore) => useModalStore.modalOpen);
  const openCloseModal = useModalStore(
    (useModalStore) => useModalStore.openCloseModal
  );

  console.log(modalOpen);

  return (
    <div className="bg-background w-full h-full">
      {modalOpen.toString()}
      /////
      <button className="bg-orange-300" onClick={(e) => openCloseModal(modalOpen)}>
        OPEN MODAL
      </button>
      <Footer />
      <Modal />
    </div>
  );

— Modal

import SlidingPane from "react-sliding-pane";
import useModalStore from "../states/modal-store";

export default function Modal() {
  const modalOpen = useModalStore((useModalStore) => useModalStore.modalOpen);
  const closeModal = useModalStore((useModalStore) => useModalStore.closeModal);

  console.log(modalOpen);

  return (
    <div>
      <SlidingPane
        className="bg-background rounded-tl-md rounded-bl-md"
        overlayClassName="some-custom-overlay-class"
        hideHeader={true}
        isOpen={modalOpen}
        width="500px"
        onRequestClose={closeModal}
      >
        <div>Hello</div>
        <br />
      </SlidingPane>
    </div>
  );
}