I have added gluestack ui to my project and everything but I am not seeing the styles I expected to be applied.

For example, I just want to import a simple button to my app

this is what it looks like

index.tsx
import {
    Button,
    ButtonText,
    ButtonSpinner,
    ButtonIcon,
    ButtonGroup,
} from '@/components/ui/button';
import {SafeAreaView, Text, View} from 'react-native'
import React, {Component} from 'react'

export default class Index extends Component {
    render() {
        return (
            <SafeAreaView className="">
                <Button size="md" variant="solid" action="primary">
                    <ButtonText>Hello World!</ButtonText>
                </Button>
            </SafeAreaView>
        )
    }
}

But I am only seeing what is in the attached image. Any thoughts?