React Native app custom Loading while fetching data Component

Question

I have a loading component (shown while fetching data for example), thats supposed to not immediately start and stop at a specified amount of time. Then a popup will be shown saying "something went wrong" and redirect to the Home screen will happen.

Its all working and I would just be happy for some code review. Im not sure if I should have the logic for when the popup is opening for example in the <Loading /> component or in the <SomethingWentWrong />.

const Loading = ({text, size, loadingTime}) => {
    const navigation = useNavigation();
    const [loading, setLoading] = useState(false);
    const [redirect, setRedirect] = useRedirect('Home', 3000);
    const [showSomethingWentWrong, setShowSomethingWentWrong] = useState(false);

    useEffect(() => { //loaing should not start immidiate
        setTimeout(() => {
            setLoading(true)
        }, 0);
    }, []);

    useEffect(() => { //loading should stop after a certain amount of time
        setTimeout(() => {
            setLoading(false);
            setShowSomethingWentWrong(true);
            setRedirect(true);
        }, loadingTime);
    }, [loading]);

    if (loading) {
        return <ActivityIndicator size={size}/>;
    }
    return (
        <Overlay
            isVisible={showSomethingWentWrong}
            onBackdropPress={()=> navigation.navigate("Home")}
            overlayStyle={styles.overlayStyle}
        >
            <SomethingWentWrong />
        </Overlay>
    )
};

const SomethingWentWrong = () => {
    return (
        <>
            <Text style={styles.text}>Something went wrong. Please close the app and open again or try again later.</Text>
            <Text style={styles.text}>Thank you!</Text>
        </>
    );
};