Use Auto Resize Textarea

import { Meta } from "@storybook/blocks";
import { useTags } from "./useTags";
import { useTags } from "./useTags";

function TagInputComponent() {
  const { tags, addTag, removeTag, removeLastTag, hasReachedMax } = useTags({
    defaultTags: [{ id: "1", label: "React" }],
    maxTags: 5,
  });

  return (
    <div>
      <div>
        {tags.map((tag) => (
          <span key={tag.id} style={{ marginRight: 8 }}>
            {tag.label}
            <button onClick={() => removeTag(tag.id)}>×</button>
          </span>
        ))}
      </div>

      <button
        disabled={hasReachedMax}
        onClick={() =>
          addTag({
            id: Date.now().toString(),
            label: "New Tag",
          })
        }
      >
        Add Tag
      </button>
    </div>
  );
}