【React】孫要素のボタンを押して、親要素のstateを変更したい

前提

Reactでシステムを構築しています。

実現したいこと

孫要素のボタンを押して、親要素のstateを変更し三項演算子にて要素を出し分けたいです。

発生している問題・エラーメッセージ

孫へのハンドラー関数の渡し方がわかりません。そもそもこの方向性であっているのか自身がありません。

該当のソースコード

＝＝＝親要素＝＝＝ export const Header = () => { const [State, setState] = useState(true); const ChangeState = (isState) => { setState(isState); }; return ( <> {State ? ( <ChildContentA setState={ChangeState} /> ) : ( <ChildContentB setState={ChangeState} /> )} </> ); }; ＝＝＝子要素＝＝＝ export const ChildContentA = (props) => { return ( <> <div> <GrandChildContent setState={props.ChangeState} /> </div> </> ); }; ＝＝＝孫要素＝＝＝ export const GrandChildContent = () => { const ChangeButton = (props) => { const isState = false; props.ChangeState(isState); }; return ( <button onClick={ChangeButton}> button </button> ); };