Correct usage of modal component

[czescwojtek]

Hi there 👋!

First, I'd like to thank y'all for this headless component lib, great work, keep it up 🙏!

Now, here I am wondering what should be the best practice when it comes to the following case. Let's assume we've got 1000 items, each with an individual id. Now, clicking on an item should display a modal component with an extra components consuming the id prop within. Should I:
a) Place the modal component in every single item so I don't have to elevate the 'id' state as I can just pass it down?

const [isOpen, setIsOpen] = useState(false)

items.map(item => (
  <>
    <button onClick={() => { setIsOpen(isOpen => !isOpen) }}>{item.name}<button>
    <Modal isOpen={isOpen} setIsOpen={setIsOpen} id={item.id} />
  </>
))

b) Create an 'id' state and place the modal component along with its 'isOpen' state somewhere in an App root component?

items.map(item => (
  <button onClick={() => { setId(item.id); setIsOpen(isOpen => !isOpen) }}>{item.name}</button>
))

Note: there could be only one modal open at a time