Ревью и исправление React‑компонента: корректное использование useLayoutEffect и useCallback

Необходимо провести проверку и доработку React‑компонента, выявив ошибки в применении хуков useLayoutEffect и useCallback, а также избавиться от потенциальных утечек памяти, лишних обработчиков событий и некорректного рендера JSX.

const reviewComponent = () => {
  const [counter, setCounter] = React.useState(1);
  const [list, setList] = React.useState([{ id: 1 }]);
  
  React.useLayoutEffect(() => {
    document.addEventListener("click", () => { 
      setInterval(() => console.log(counter), 1000);
    }); 
  });
  
  const handleClick = React.useCallback(() => { 
    setCounter(counter + 1);
    setList([...list, { id: counter + 1 }]);
  });
  return (
    <React.Fragment>
      <ul>
        (list.map((item) => (
        <li>{item.id)</li>
        ))}
      </ul>
      <button onClick={() => handleClick()}>add one</button> 
    </React.Fragment>
}