How to prevent propagation in nested components

I have the following use case: a select dropdown, inside a modal.

I want to be able to set things up so that if the ‘escape’ key is hit when the dropdown is not open, it closes the modal, but if the dropdown IS open, it only closes the dropdown (and not the modal).

I’m testing this idea using the following, basic approach:

const Dropdown = () => {
  useHotkeys("esc", () => (e) => {
    e.preventDefault();
    e.stopPropagation();
    console.log("Dropdown escape");
  }, {
    enableOnTags: ["INPUT"],
  });

  return (<div>Dropdown</div>)
}

const Modal = () => {
  useHotkeys("esc", () => console.log("Modal escape"), {
   enableOnTags: ["INPUT"],
  });
 
  return (<Dropdown />)
}

I would have thought that using preventDefault and / or stopPropagation would do the trick here, but when I try running this code, the console.log fires twice, one for each component.

I’m probably not going about this the right away, so any help would be greatly appreciated.

[JohannesKlauss]

useHotkeys accepts a generic to type the ref: const ref = useHotkeys<HTMLDivElemen>(...)

[sebpowell]

I completely missed this 🤦 Thank you so much for the quick response and help!