specifically when it mounts it appears on the far upper left of the screen like it has no styling, but when its on and active and i remove it from the code (the popup) and put it again it appears like it has styles and its centered here is my code:

import { Modal, View, Text, TouchableOpacity } from 'react-native';
import CustomButton from './CustomButton';
import { Setter } from '@/types/data';

interface PopupProps {
  visible: boolean
  closePopup: () => void
  isCorrect: boolean
}

const Popup: React.FC<PopupProps> = ({ visible, closePopup, isCorrect }) => {
    return (
        <Modal
        transparent={true}
        animationType="fade"
        visible={visible}
        >
            <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
                <View className="bg-white p-6 rounded-xl w-80 items-center">
                    <Text className="text-lg font-bold mb-2">{isCorrect ? "You are correct, Good job!" : "Oops, incorrect! Let's try again."}</Text>
                    <CustomButton text={isCorrect ? "Continue!": "Try again!"} handlePress={closePopup}/>
                </View>
            </View>
        </Modal>
    );
};

export default Popup;

the use of the component:

            {showPopup && (
                <Popup
                    key={showPopup.toString()}
                    visible={showPopup}
                    closePopup={handleClosePopup}
                    isCorrect={selectedAnswer == course?.questionPages[questionIndex].correctAnswerIndex}
                />
            )}```