Custom theme is not applied to the react-native-elements components

I've created a custom theme and passed it to ThemeProvider, but it hasn't been applied to react-native-elements components. I'm using react-native-elements version 4.0.0-rc. Here is my code:

Custom theme

import { createTheme } from '@rneui/themed';export const theme = createTheme({  lightColors: {    primary: 'red',    background: '#fff',    platform: {      web: {        primary: 'red',      },    },  },  darkColors: {    primary: 'red',    background: '#000',    platform: {      web: {        primary: 'red',      },    },  },  mode: 'light',});

App.tsx

import { ThemeProvider } from '@rneui/themed';import { registerRootComponent } from 'expo';import { SafeAreaProvider } from 'react-native-safe-area-context';import Root from './Root';import { theme } from './themed';function App() {  return (<SafeAreaProvider><ThemeProvider theme={theme}><Root /></ThemeProvider></SafeAreaProvider>  );}export default registerRootComponent(App);

Root.tsx

import { Button } from '@rneui/base';import { useTheme, useThemeMode } from '@rneui/themed';import { StatusBar } from 'expo-status-bar';import { StyleSheet, Text } from 'react-native';import { SafeAreaView } from 'react-native-safe-area-context';export default function Root() {  const { theme } = useTheme();  const { mode, setMode } = useThemeMode();  return (<SafeAreaView style={styles.container}><Text>Hello world!</Text><Button        color="primary"        title={'Click me'}        size="md"        radius={'md'}        onPress={() => setMode(mode === 'dark' ? 'light' : 'dark')}      /><StatusBar style="auto" /></SafeAreaView>  );}const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: '#fff',    alignItems: 'center',    justifyContent: 'center',  },  text: {    marginTop: 10,  },});

Resultresult

The Button must have red background instead of the default blue. Should I have passed the theme to Button's prop? like this

export default function Root() {  const { theme } = useTheme();  const { mode, setMode } = useThemeMode();  return (<SafeAreaView style={styles.container}><Text>Hello world!</Text><Button        theme={theme}        color="primary"        title={'Click me'}        size="md"        radius={'md'}        onPress={() => setMode(mode === 'dark' ? 'light' : 'dark')}      /><StatusBar style="auto" /></SafeAreaView>  );}

I want my custom theme to be applied by default to all components instead of always having to pass the theme to its prop. Can anyone help?