How to properly make a module window in React?

Question

React

Hello!
I have a modular window and I made it a component (in a separate file), when you click on the div element, you need to show this window.
( I have a module window in one file, a div element in another )
How to do it right I have two guesses:
1) Make the modal and div in the same file ( cons: bad code, styling problems )
2) Use React-Route ( I don't even know how to use it

Answer 1

Like this:

const [modalIsVisible, setModalIsVisible] = useState(false);

return (
  <>
    <button onClick={() => setModalIsVisible(true)}>Show modal</button>
    { modalIsVisible && <Modal onClose={() => setModalIsVisible(false)} /> } 
  </>
)