React context provider not allowing undefined

Question

I'm trying to provide user agent, like so:

// user-agent-provider.tsx
export const userAgentContext = createContext<UAParser | undefined>(undefined);
export const UserAgentProvider = userAgentContext.Provider

I packaged this code into @teambit/ui-foundation.ui.hooks.use-user-agent, and used it like so:

// app.tsx

import { UserAgentProvider } from '@teambit/ui-foundation.ui.hooks.use-user-agent';

// UA may be undefined during server side rendering
const userAgent = typeof window !== 'undefined' ? new UAParser(window.navigator.userAgent) : undefined;

export function App({children}: any) {
  // error here! ⬇
  return <UserAgentProvider value={userAgent}>{children}</UserAgentProvider>
}

I then get this error:

Type 'UAParserInstance | undefined' is not assignable to type 'UAParserInstance'.
  Type 'undefined' is not assignable to type 'UAParserInstance'.ts(2322)

looking inside the package dist, I see this .d.ts file:

export declare const userAgentContext: import("react").Context<UAParser>;
export declare const UserAgentProvider: import("react").Provider<UAParser>;

This is clearly the cause, the | undefined somehow got omitted from the provider.

Any idea why? and how to fix this?