What is the correct approach in writing a modal window?

Question

React

Create 1 reducer that will store the state of the modal window (open / closed), and make it reusable throughout the application. Throw other handlers for buttons through props (unless, of course, they are needed).
Or would it be more correct for each modal window to create its own reducer + component? For example: ModalProduct, ModalFilter, etc.

I think it's probably better to take the 2nd method, if suddenly there are 2 modals on 1 page, they will open all together. Suggest solutions based on your experience.
ps the project is quite large: a landing page, an account, an admin panel.

Answer 1

If you need to store only the state of the open / closed reducer, in my opinion it is redundant. Use the normal state via the useState hook.