Creating an interactive counter in a React application

It is required to modify the provided React component so that it meets the following conditions:

1. The current value of the counter should be displayed on the screen.
2. When clicking the button labeled "Increase," the counter should increase by one.
3. When double-clicking the same button, the counter should reset to zero.
4. The solution should be implemented using a functional component and hooks useState (to store the value) and, if necessary, useEffect.

Hints:

• Create a counter state using useState.
• Add an onDoubleClick handler to the button that will reset the counter.

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;