Tengo dos cuadrículas, y en cada cuadrícula tengo un botón que me gustaría tener su propio modal único. Sin embargo, cada vez que intento usar los modales de Bootstrap, solo obtengo los datos del primer botón, aunque puedo estar haciendo clic en un botón diferente que debería mostrar un modal diferente.

 import React from 'react'; import { useModal } from 'react-hooks-use-modal'; const App = () => { const [Modal, open, close, isOpen] = useModal('root', { preventScroll: true, closeOnOverlayClick: false }); return ( <div> <button onClick={open}>OPEN</button> <button onClick={open}>OPEN1</button> <Modal> <div tabIndex="-1" id="myModal1" style={{backgroundColor: 'deepskyblue',width: 300,height: 300}}> <h1>Title</h1> <p>This is a customizable modal.</p> <button data-toggle="modal" data-target="#myModal1" onClick={close}>CLOSE</button> </div> </Modal> <Modal> <div tabIndex="-1" id="myModal2" style={{backgroundColor: 'deepskyblue',width: 300,height: 300}}> <h1>Title</h1> <p>hello world</p> <button data-toggle="modal" data-target="#myModal2" onClick={close}>CLOSE</button> </div> </Modal> </div> ); }; export default App;