"use client"
 
import * as React from "react"
 
import { useControlledState } from "@/hooks/use-controlled-state"
 
export function Component() {
  const [count, setCount] = React.useState(0)
  return <CounterInput count={count} onChange={setCount} />
}
 
function CounterInput({
  count,
  onChange,
}: {
  count?: number
  onChange?: (count: number) => void
}) {
  const [value, setValue] = useControlledState<number>({
    prop: count,
    defaultProp: 0,
    onChange,
  })
 
  return (
    <div>
      <button onClick={() => setValue((prev) => (prev ?? 0) + 1)}>
        Increment
      </button>
      <p>Count: {value}</p>
    </div>
  )
}