React native styled components provider return undefined

I am using React native typescript for my app. This is my App-structure. I have made custom Styled-components theme provider And I glued to my root project. It throws me error: (0 , _$$_REQUIRE(...).createGlobalStyle) is not a function. I don't get it what I am making a mistake.

This is my theme.ts

import {createGlobalStyle} from 'styled-components';interface Light {  body: string;  text: string;}export const lightTheme: Light = {  body: '#f1f1f1',  text: '#121620',};export const darkTheme = {  body: '#121620',  text: '#f1f1f1',};type ThemeType = typeof lightTheme;export const GlobalStyles = createGlobalStyle<{theme: ThemeType}>`  body {    background: ${({theme}) => theme.body};    color: ${({theme}) => theme.text};    transition: background 0.2s ease-in, color 0.2s ease-in;  }`;

**This provider folder where I am importing the theme. **

import React, {useState, useEffect} from 'react';import {ThemeProvider} from 'styled-components';import AsyncStorage from '@react-native-community/async-storage';import {lightTheme, darkTheme, GlobalStyles} from '../theme/index';interface IThemeProvider {  children: JSX.Element;}const GlobalThemeProvider = ({children}: IThemeProvider) => {  const [theme, setTheme] = useState('light');  const isDarkTheme = theme === 'dark';  useEffect(() => {    const savedTheme = AsyncStorage.getItem('theme');    if (savedTheme && ['dark', 'light'].includes(savedTheme)) {      setTheme(savedTheme);    }  }, []);  return (<ThemeProvider theme={isDarkTheme ? darkTheme : lightTheme}><><GlobalStyles />        {children}</></ThemeProvider>  );};export default GlobalThemeProvider;

In here I am importing the GlobalThemeProvider and Glued to my Root project

import * as React from 'react';import {StatusBar} from 'react-native';import {NavigationContainer} from '@react-navigation/native';import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';import {SafeAreaProvider} from 'react-native-safe-area-context';import GlobalThemeProvider from './src/providers/GlobalThemeProvider';import LocalizationProvider from '@local/translation';import HomeScreen from '@local/screen/Home';import SettingsScreen from '@local/screen/Settings';const Tab = createBottomTabNavigator();const App = () => {  return (<NavigationContainer><StatusBar barStyle="dark-content" /><SafeAreaProvider><LocalizationProvider><GlobalThemeProvider><Tab.Navigator<Tab.Screen name="Home" component={HomeScreen} /><Tab.Screen name="Settings" component={SettingsScreen} /></Tab.Navigator></GlobalThemeProvider></LocalizationProvider></SafeAreaProvider></NavigationContainer>  );};export default App;