How to access a custom variant from a custom theme in Typescript?

[ptrtdrv]

After creating a custom theme, I tried to access a custom font variant in a React Functional Component like this:

function MarkdownText() {
  const theme = useAppTheme();
  console.log('bold: ', theme.fonts.bold)
  ...
  return(
     ...
  )
}

In the code sample above 'theme.fonts.bold' is the custom font variant.

I followed the instructions in the official react-native-paper's site to create the custom theme and 'useAppTheme' like this:

import { MD3LightTheme as DefaultTheme, configureFonts, useTheme } from "react-native-paper";


const customVariants = {
  ...DefaultTheme.fonts,
  'bold': {
    ...DefaultTheme.fonts.titleLarge,
    fontFamily: 'Rubik_700Bold_Italic',
  }
} as const;

const theme = {
  ...DefaultTheme,
  fonts: configureFonts({
    config: customVariants,
  })
};

type AppTheme = typeof theme;
export const useAppTheme = () => useTheme<AppTheme>();

But unfortunately console.log('bold: ', theme.fonts.bold) prints "bold: undefined" and my VSCode editor says "Property 'bold' does not exist on type 'MD3Typescale'.ts(2339)".

So what am I missing?

[ptrtdrv]

Maybe I have to define useAppTheme like this?

export const useAppTheme = () => useTheme<AppTheme>(theme);

Note the theme argument that I added in useTheme method.