z-index, simple yet confusing

Suppose you have a modal in your app and you also had some custom input of yours just like Material-UI chip array and the overlay part of the modal is just above the input.

You are building a feature and adding your fields in the modal and to check the functionality you tried to close the modal by clicking on the overlay of the modal

But you find out that you are clicking on the overlay but instead of closing the modal the input gets focused. so what is wrong here?

You started debugging the styling and realize that both modal and input stack level is same around the z-axis and browser display the last element on top and when you were clicking on the overlay of that input area because of the event bubbling input was getting focused.