How to share data between hooks in React (coordinating loosely related components)

Say I want to create a complicated, coordinated animation that involves the following:

1. The parent knowing when certain children are finished animating.
2. The children knowing when certain unrelated nodes in the DOM tree are done animating.

The standard way to do this would be to create a central "dispatcher" object sort of thing, and then register all the elements accordingly to it. Then when children are done, parent is done, etc.

But how do you do this with React hooks?

function ComponentA() {
  when b is done, animate c and d
  when d is done, animate self
  <div>
    <ComponentB animator={animator}/>
    <ComponentC animator={animator}/>
    <ComponentD animator={animator}/>
  </div>
}

function ComponentB() {
  animate div
}

function ComponentC() {
  when c starts, animate x, then animate y, how?
  <ComponentX animator={animator}/>
  <ComponentY animator={animator}/>
}

function ComponentD() {
  animate b, how?
}

function ComponentX() {
  animate div
}

function ComponentY() {
  animate div
}