"use client"
 
import * as React from "react"
 
import useAutoScroll from "@/hooks/use-auto-scroll"
 
export function Component() {
  const [items, setItems] = React.useState(["Item 1"])
  const listRef = useAutoScroll(true, [items])
 
  const addItem = () => setItems([...items, `Item ${items.length + 1}`])
 
  return (
    <div>
      <ul ref={listRef} className="h-40 overflow-y-auto border">
        {items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
      <button onClick={addItem}>Add Item</button>
    </div>
  )
}