There is the main(Template.js) page, in which data is fetched from API, using this data the List (from material-ui) is formed by renderTemplatesList function. How can I handle list element onClick event and change the h1 content?

//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;
};