React Flowbite Modal does not open from external component

Question

I am just started with Flowbite react components. I am facing a couple of quite annoying issues with the Modal. Here is the one:

// This component will be used inside of the next one. It has a button that can make it visible and onClose function to hide the modal. Looks like this part is working fine.
const TestingModal = (props: {
  defaultOpen: boolean
}) => {

  const [testOpen, setTestOpen] = useState(props.defaultOpen)

  return <div>
    <Button onClick={() => setTestOpen(true)}>Open modal</Button>
    <Modal show={testOpen} onClose={() => setTestOpen(false)}>
      <Modal.Header>
      </Modal.Header>
      <Modal.Body>
        Hello
      </Modal.Body>
    </Modal>
  </div>
}

// This component defines the test modal component initial state and also has a button to make the component visible. But the button does not work.
const TestingTableWithModal = () => {

  const [testOpen, setTestOpen] = useState(false)

  return <>
    <Button onClick={() => setTestOpen(true)}>This button does not open the modal</Button>
    <TestingModal defaultOpen={testOpen} />
  </>
}

I am not sure where the problem is exactly. Is it the modal that is doing some weird thing, or do I lack some React fundamentals?

Please help.