I have two grids, and in each grid I have a button that I would like to have its own unique modal. Whenever I try using Bootstrap's modals' however, I am only getting the first button's data to show up, even though I may be clicking on a different button that should display a different modal.

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;