Сделали колбэк с пробросом на 2 уровня

src/App.jsx

@@ -2,28 +2,48 @@ import styles from './styles/App.module.scss'
 import React, { useState, useCallback } from 'react'
 
 function Parent() {
-    const [text,setText] = useState('')
+    const [selectedId,setSelectedId] = useState(null);
     
-    const handlerChange = useCallback( event => {
+    const items = [
-        setText(event.target.value);
+        {id:1, name: 'Первый'},
+        {id:2, name: 'Второй'},
+        {id:3, name: 'Третий'},
+        {id:4, name: 'Четвертый'},
+    ];
+    
+    const handleSelect = useCallback( id => {
+        setSelectedId(id);
     },[]);
     
     return (
         <>
-            <h2>Проверка события onChange</h2>
+            <h2>Проверка события select</h2>
             <div>
-                <Child value={text} onChange={handlerChange} />
+                <ItemList items={items} onSelect={handleSelect} />
-                <p>Вы ввели текст: {text}</p>
+                {selectedId && <p>Выбран элемент с ID: {selectedId}</p>}
             </div>
         </>
     );
 }
 
-function Child({ value, onChange }) {
+function ItemList({items, onSelect}) {
-    console.log('rendred');
+    return (
-    return <input type="text" value={value} onChange={onChange} />
+        <ul>
+            {items.map(item => (
+                <Item key={item.id} item={item} onSelect={onSelect} />
+            ))}
+        </ul>
+    )
 }
 
+const Item = React.memo(({ item, onSelect }) => {
+    console.log(`rendred ${item.name}`);
+    const handleClick = useCallback(() => {
+        onSelect(item.id)
+    })
+    return <li onClick={handleClick}>{item.name}</li>
+});
+
 function App() {
 	return (
 		<>