import { useState } from 'react'

export const App = () => {
  const [count1, setCount1] = useState(0)
  const [count2, setCount2] = useState(0)

  return (
    <main className="p-5 flex flex-col gap-5">
      <Counter count={count1} setCount={setCount1} />
      <Counter count={count2} setCount={setCount2} />
    </main>
  )
}

const Counter = ({ count, setCount }) => {
  console.log('Render')
  return (
    <button onClick={() => setCount(count + 1)}>Increment - {count}</button>
  )
}