子コンポーネントから最新の親のstateを取得したい

Reactで子コンポーネントを動的に追加して、子コンポーネントのボタンを押したとき親のstate読み取る関数を実行しようとしていますがうまくいきません。

具体的には子コンポーネントのボタンを押すと親コンポーネントの関数を実行して、子の数を取得できるようにしてみたかったのですが、常に 0 が返ってきてしまいます。

子コンポーネント生成時点での state の状態を取得してしまっているようなのですが、現在のstateを取得できるようにするにはどのようにすればいいのでしょうか？

App.js

javascript

import React, { useEffect, useState } from 'react';import Item from './Item'; function App() { const [items, setItems] = useState([]); const countItems = () => { console.log(items); return items.length; }; useEffect(()=>{ const items2 = []; for(let i = 0; i < 3; i++){ items2.push(( <Item key={i} title={"Item " + i.toString()} countItems={countItems} /> )); } setItems(items2); }, []); return ( <> {items} </> );} export default App;

Item.js

javascript

import React, { useState } from 'react'; function Item({...props}) { const handleButtonClick = (e) => { var length = props.countItems(); console.log(length); }; return ( <div> {props.title} <button type="button" onClick={(e) => {handleButtonClick(e)}}> Count </button> </div> )} export default Item;