Está la página principal (Template.js), en la que los datos se obtienen de la API, utilizando estos datos, la List (de material-ui) está formada por la función renderTemplatesList . ¿Cómo puedo manejar el evento onClick del elemento de la lista y cambiar el contenido h1 ?

 //Template.js export default function Template() { const [data, setData] = useState([]); useEffect(() => { //get data from backend... }, []); const templateData = renderTemplatesList(data); return ( <div> <List>{templateData}</List> </div> <div> <h1>{/* Selected list item params */}</h1> </div> ); }

 export const renderTemplatesList = (items) => { let templates = null; if (items !== undefined && items !== null && items.length !== 0) { templates = items.map((template) => ( <ListItem> <ListItemButton> <ListItemText primary={template.name} /> </ListItemButton> </ListItem> )); } return templates; };