React JSON Tree Viewer (Read-Only, Recursive)

Design and implement a React component that accepts a JSON string and renders a pretty-printed, read-only tree view. Each nested object or array must be collapsible/expandable via a toggle (e.g., a caret).

Requirements

1. Support arbitrarily deep nesting by recursively rendering child components.
2. Parse the input string safely; handle invalid JSON gracefully (show a helpful error without crashing).
3. Maintain per-node expand/collapse state.
4. Demonstrate the behavior using the input below. The "school" node should be collapsible/expandable:
   • Provided (non-strict) input: {name: "bob", age: 5, nicknames: ["bobby", "bobman"], school: {name: "bob university", year: 2015}}
   • Valid JSON to use in the demo: {"name":"bob","age":5,"nicknames":["bobby","bobman"],"school":{"name":"bob university","year":2015}}
5. Briefly explain the component structure, state shape, and complexity considerations.

Assumptions

• Use modern React (functional components + hooks, React 17/18+).
• No external libraries required; plain CSS/inline styles are fine.
• The component is read-only (no editing).