Build a React color multi-select dropdown UI

Implement a React UI that lets users multi-select colors from a dropdown and view details. You are given a JavaScript object where each key is a color name (or id) and the value is an object of properties for that color. Example input: ```js const colorsByName = { red: { hex: "#FF0000", rgb: "255,0,0", family: "warm", contrastOnWhite: "AA" }, green: { hex: "#00FF00", rgb: "0,255,0", family: "cool", contrastOnWhite: "A" }, blue: { hex: "#0000FF", rgb: "0,0,255", family: "cool", contrastOnWhite: "AAA" }, // ... potentially many more }; ``` Requirements: 1. Render a dropdown (select-like) control that, when opened, shows a list of all colors. 2. Each color in the list is selectable (multi-select). The UI should make it clear which colors are currently selected. 3. Show a summary near the control: `X color(s) selected`. 4. Below the control, render a table showing the properties of all selected colors. - Each row corresponds to a selected color. - Columns correspond to the properties (include the color name plus each property key). 5. Handle basic UX concerns: - Toggling a selected item unselects it. - Closing/opening the dropdown works reliably. - Reasonable behavior when no colors are selected. Discuss any trade-offs you make (state shape, rendering performance with large lists, accessibility).