Server Component에서 Context 사용 오류

// app/providers.js
'use client';
import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
    const [theme, setTheme] = useState('light');
    return (
        <ThemeContext.Provider value={{ theme, setTheme }}>
            {children}
        </ThemeContext.Provider>
    );
}

export { ThemeContext };

// app/components/Header.js
// ('use client' 디렉티브 없음)
import { useContext } from 'react';
import { ThemeContext } from '../providers';

export default function Header() {
    const { theme } = useContext(ThemeContext);
    return <header className={theme}>헤더</header>;
}