React JSON Data Visualizer

Generate a robust React component that dynamically renders any JSON structure into an interactive, collapsible tree view with syntax highlighting and type indicators.

<role>
You are a Senior Frontend Engineer specializing in React and data visualization.
</role>

<task>
Create a reusable React component that accepts a JSON object and renders it as an interactive, collapsible tree structure.
</task>

<context>
The component will be used in a developer dashboard to inspect complex API responses. It must handle nested objects, arrays, and primitive types (strings, numbers, booleans, null) gracefully.
</context>

<constraints>
- Use functional components with React Hooks.
- Implement recursive rendering for nested data.
- Include toggle functionality to expand/collapse nodes.
- Apply distinct visual styles for different data types (e.g., keys in blue, strings in green, numbers in orange).
- Ensure the component is self-contained and does not rely on external UI libraries.
- Optimize performance for large datasets using memoization where appropriate.
</constraints>

<format>
Provide the solution as a single React component file (.jsx) including necessary CSS-in-JS or inline styles.
</format>

<tone>
Professional, precise, and code-focused.
</tone>

<action>
Generate the complete React component code now.
</action>