Modal close methods not working in a React project.

[SadeeMsr]

I have installed the beta version. I am using a modal for my form. To close the modal I needed to add the button outside the modal. But every "data attribute" & " JS methods" not working for closing it from outside. It's so frustrating. Same code working for show() just fine. But whenever I am using hide() it's not working both for data-te-dismiss and JS methods written in API.

[juujisai]

We have created a tutorial about how to integrate React application with Tailwind Elements:
https://tailwind-elements.com/docs/standard/integrations/react-integration/

I have followed the steps and managed to use the show and hide methods like in a example below ( I used the modal from Basic Example ). If your modal is still not working properly, show us some code so we can check what is going on.

import { useEffect, useRef } from "react";
import "./App.css";
import * as te from "tw-elements";

function App() {
  const modal = useRef(null);
  const openModal = () => {
    modal.current.show();
  };
  const closeModal = () => {
    modal.current.hide();
  };

  useEffect(() => {
    const myModalEl = document.getElementById("exampleModal");
    modal.current = new te.Modal(myModalEl, {
      backdrop: false,
    });
  }, []);
  return (
    <div className="App">
        {/* <!-- modal code here --> */}
      <div className="fixed bottom-0 w-full z-[9999]">
        <button
          className="mr-4 bg-primary text-white p-4 rounded"
          onClick={openModal}
        >
          Open Modal
        </button>
        <button
          className="bg-primary text-white p-4 rounded"
          onClick={closeModal}
        >
          Close Modal
        </button>
      </div>
    </div>
  );
}

export default App;

Best Regards!