Triggering an event inside ReactJs component from outside

Question

I am using ReactJs to render a list of elements, call it "list-app". I have another mini app that creates an element, let's call it "create-app". Both of them are rendering functional components into different html nodes.

I have two questions for this context:

1. How do I inject the created element into the "list-app"? Please bear in mind that I want the two mini-apps to be separate.
2. How do I trigger the "list-app" from the "create-app"?

While this could have been done by using Class Based components, I don't understand how to use the useRef or useImperativeHandle in functional react components.

I tried saving a set state function to a window function. Is there a better solution?

window.refreshChildren = function() {setRefresh(!refresh)};