我在 LessonThemes 组件中使用钩子，使用上下文，我尝试访问 Test 组件内的 color 值，但出现错误

对象不可迭代（无法读取属性 Symbol (Symbol.iterator)）

LessonThemes.jsx

import React, {useState, useEffect, createContext} from "react";
import ThemeContext from "./ThemeContext";

export const CounterContext = createContext();

export default function LessonThemes(props) {
    const [color, setColor] = useState(localStorage.getItem("color"));

    const [themes, setThemes] = useState([
        { name: "G", color: "green" },
        { name: "R", color: "red" },
        { name: "B", color: "blue" },
    ])

    useEffect(() => {
        localStorage.setItem("color", color);
    })

    const SideBarPageContent = (SideBarPageContentBackground) => {
        localStorage.setItem('color', SideBarPageContentBackground);
        setColor(SideBarPageContentBackground);
    }

    return (
        <CounterContext.Provider value={[color, setColor]}>
            {
                themes.map((theme, index) => {
                    return (
                        <label key={index}>
                            <input
                                onChange={() => SideBarPageContent(theme.color)}
                                type="radio"
                                name="background"
                            />{theme.name}</label>
                    );
                })
            }
        </CounterContext.Provider>
    );
}

Test.jsx

export default function Test(props) {

  const [color] = useContext(LessonThemes);

  return (
    <div>
      <div className="sidebar-brand-container">
        <LessonThemes />
      </div>
      <div>
        <span style={{ background: color }} href="#">Theme</span>
      </div>
    </div>
  );
}