What are the standard methods to passing state from parent to child in React?

I’ve recently been coding my first React project and have consistently come across a problem. When I pass state to a child lets say in an empty-dependency useEffect, and then the state updates, the child does not update as well. I run into the same problem using useRef as well. My question is: is there a standard method of passing information from parent to child without running into the problem of javascript closures? Is there a way to pass a state to a component who is only interacted with once on mount and have it keep reflecting new changes?

In my problem specifically, I have a piano component with pianokey children components. I create the piano in an empty-dependency useEffect. When I want to update the pianokeys with something that doesnt need a rerender lets say information to trigger an animation, I am currently cloning the key with a different prop. This could be done with using state but closures keep bogging me down.