Создание интерактивного счётчика в React‑приложении

Требуется доработать представленный React‑компонент так, чтобы он удовлетворял следующим условиям:

1. На экране должно отображаться текущее значение счётчика.
2. При нажатии на кнопку с надписью «Увеличить» счётчик должен расти на единицу.
3. При двойном клике по той же кнопке счётчик сбрасывается до нуля.
4. Решение должно быть реализовано с помощью функционального компонента и хуков useState (для хранения значения) и, при необходимости, useEffect.

Подсказки:

• Завести состояние счётчика через useState.
• Добавить обработчик onDoubleClick к кнопке, который будет выполнять сброс.

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="app">
      <div className="header">
        <div>
          <img src="https://storage.googleapis.com/coderpad_project_template_assets/coderpad_logo.svg" />
        </div>
        <div>
          <img src="https://storage.googleapis.com/coderpad_project_template_assets/react.svg" />
          <span>React App</span>
        </div>
      </div>
      <div className="content">
        <img src="https://storage.googleapis.com/coderpad_project_template_assets/react.svg" />
        <p>Hello React!</p>
      </div>
      <div className="footer">
        Use the Shell to install new packages.
      </div>
    </div>
  );
}

export default App;