Context uses default value instead of one passed to provider

export const LocaleContext = createContext<
    [Accessor<'en' | 'he'>, () => 'he' | 'en' | void]
>([() => 'he' as const, () => {}]);

export const LocaleProvider: ParentComponent = ({ children }) => {
    const [locale, switchLocale] = createSignal<'en' | 'he'>('en');
    const switchLanguage = () => {
        switchLocale((prev) => (prev === 'en' ? 'he' : 'en'));
        return locale();
    };
    return (
        <LocaleContext.Provider value={[locale, switchLanguage]}>
            {children}
        </LocaleContext.Provider>
    );
};

export function useLocale() {
    return useContext(LocaleContext);
}

<LocaleProvider>
    <Router root={Layout}>

export default function Navbar() {
    const [locale, switchLocale] = useContext(LocaleContext);