React: how can I control the state of another functional component that can be far away in the three?

I’m trying to achieve a thing and I don’t know how to do it.
My idea is in a React application to have a snackbar component. I want to made all the app with functional components. When some event happens in the app – for instance the theme it’s changed, etc… – the snackbar will be shown.

My problem is that the components that call the snackbar can be very distant in the tree. My first idea was adding the snackbar component straight to the html element with a 0 opacity, and when the trigger occurs change the opacity… The other ideas was append a snackbar component to the DOM every time it’s triggered. The las idea was use context, but I understood that is not the best solution to this kind of things. I tried to pass a callback that modifies the state with hooks (useState or useEffect) but it didn’t work…

Which is the best solution to this scenario: control the state of another functional component that can be far away in the three?

Excuse me if it’s a noob question! Thanks you very much!