【React】配列内の特定のオブジェクト内の配列に値を追加したい

実現したいこと

現在、2階層の ToDo アプリを作成しているのですが、2階層目の新しい要素を追加する処理のロジックがうまく実装できません。
どのように論理立てて実装するかがわかっていない段階です。

発生している問題・分からないこと

具体的な処理の流れを理解できていません。
下記に現状の簡易的な処理を書きます。

下記のソースコードが今回のはまっている問題の処理を簡略化したものなのですが、Child.jsxのinputに値を入力したときにlistsの特定のオブジェクトのsubListsに追加したいのですが、その処理について理解できません。

例えばuseStateでsubListsは定義していませんが、これはChild.jsx内で定義する必要があるのでしょうか？それともinputの値を親に渡して親に関数処理を記述するべきでしょうか？

ただ仮にそれを言語化できたとしても、実装のロジックを組み立てることができるのかもわかりません。

該当のソースコード

Parent.jsx

1const listsDefault = [ 2 { 3 title: 'タイトル1', 4 isCompleted: false, 5 subLists: [ 6 { 7 item: 'タイトル1 のアイテム1', 8 isCompleted: false, 9 }, 10 { 11 item: 'タイトル1 のアイテム2', 12 isCompleted: false, 13 }, 14 ], 15 }, 16 { 17 title: 'タイトル2', 18 isCompleted: false, 19 subLists: [ 20 { 21 item: 'タイトル2 のアイテム1', 22 isCompleted: false, 23 }, 24 { 25 item: 'タイトル2 のアイテム2', 26 isCompleted: false, 27 }, 28 ], 29 }, 30]; 31 32const Parent = () => { 33 const [lists, setLists] = useState(listsDefault); 34 35// ここに関数が書いてありますが省略しています 36 37 return ( 38 39 // 1階層目のリストや特定のリストをクリックすることで2階層目の特定のリストが表示されるコンポーネントが書かれていますが、今回は省略します 40 41　　// listNum は関数処理は省略していますが、1階層目の特定のリストをクリックすることで変化する数値の値です。 42 <SubLists lists={lists} listNum={listNum} /> します 43 ); 44 45}; 46 47export default Parent; 48

Child.jsx

1const SubLists = ({ lists, listNum }) => { 2 return ( 3 <> 4 <main > 5 <form> 6 <input placeholder="タスクを入力..." /> 7 </form> 8 <ul> 9 // 2階層目のToDoがリストで表示されます 10 {lists[listNum].subLists.map((list, index) => ( 11 <li key={index}> 12 <span>{list.item}</span> 13 </li> 14 ))} 15 </ul> 16 </main> 17 </> 18 ); 19}; 20 21export default SubLists;

試したこと・調べたこと

上記の詳細・結果

様々な情報やデバックなどを試みてみたのですが、理解できませんでした。

補足

特になし