React Context Returns Undefined - Missing Provider

1. Context used outside provider component
2. Provider not wrapping the component tree
3. Provider wrapping but wrong context imported
4. Multiple context providers with different values
5. Provider mounted after child component

Create context and provider:

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  return (
    
      {children}
    
  );
}

// In component tree
export function App() {
  return (
    
      
    
  );
}

// In nested component
function MyComponent() {
  const { theme } = useContext(ThemeContext);
}