FAQ Disclosure

Build an FAQ list as a single React component. Each row is a question button with an answer panel that expands when you click it. It looks like an accordion, but the twist is the state: every item opens and closes independently, so more than one answer can be showing at once.

Task

The starter App.tsx renders three questions, all collapsed. Make them interactive:

1. Hold the state. Track which items are open — a Set<number> of open indices in useState is the clean shape.
2. Toggle on click. Each question button toggles its own index — add it if closed, remove it if open. Other items are untouched.
3. Reflect it three ways. For an open item: add the open class (the chevron rotates via CSS), set aria-expanded={true} on its button, and render its <p className="a"> answer. Closed items render no panel.

Examples

• The page loads with three questions and no answers visible; every chevron points down.
• Click "Can I cancel anytime?" — its answer appears, its chevron flips, and aria-expanded becomes true. The other two stay closed.
• Click a second question — it opens too, without closing the first. Click either again to collapse just that one.

Notes

• Independent state, not single-open. A single-open accordion keeps one active index; here each item has its own flag, so a Set (or a boolean[]) fits better than one number.
• Derive everything from the set. The open class, aria-expanded, and whether the panel renders all read from open.has(i) — don't track them separately.
• Update the set immutably. Copy it (new Set(prev)) inside the updater so React sees a new reference and re-renders.
• Styling (borders, chevron rotation, colours) is already in styles.css; focus on the state.