ANDROID BlurView not working (react native)

Question

I have been trying to get the blur effect to work on Android for a long time. I tried to solve it using the viewRef reference system but it doesn't work right. Can somebody help me?

The sample page I wrote for Android is as follows;

import React, { useCallback, useEffect, useState, useRef } from 'react';
import { Image, StyleSheet, Text, TouchableOpacity, View, findNodeHandle, InteractionManager } from 'react-native';
import { BlurView } from '@react-native-community/blur';

const AndroidPreviewScreen = ({ route, navigation }) => {
    const { speed, brightness, selectedDevice, selectedAnimationId, selectedUserTheme, selectedThemeId, selectedEqAnimation, selectedColors } = route.params;
    const selectedAnimation = selectedAnimationId && animationOptions.find(o => o.id === selectedAnimationId);
    const selectedTheme = selectedThemeId && themeOptions.find(o => o.id === selectedThemeId);

    const [isVisible, setIsVisible] = useState(false);

    const [viewRef, setViewRef] = useState(null);

    const blurRef = useRef();

    useEffect(() => {
        setTimeout(() => {
            setIsVisible(true);
        }, 50);
    }, [])

    const onBack = useCallback(() => {
        setIsVisible(false);
        setTimeout(() => {
            vibrateLight();
            navigation.goBack();
        }, 5);
    }, []);


    return (
        <View style={styles.container} >
            <TouchableOpacity style={styles.closeBtn} onPress={onBack} hitSlop={hitSlop.mid}>
                <FontAwesome5Icon name="times" color={colors.powerCustomBg} size={20} style={styles.closeIcon} />
            </TouchableOpacity>
            {isVisible && <View style={styles.previewImageContainer}>
                {selectedDevice && !selectedDevice.isOn && <View style={styles.offContainer}>
                    <FontAwesome5Icon name={'info-circle'} size={20} color={colors.powerBtnOn} />
                    <Text style={styles.offText}>Off</Text>
                </View>}

                <View style={[styles.colorMaskContainer]}
                    ref={n => {
                        if (n && viewRef === null) {
                            setViewRef(findNodeHandle(n))
                        }
                    }}
                    collapsable={false}
                >
                   
// I want to blur this section.
                </View>

                {console.log("viewRef  :    :    ", viewRef)}

                {viewRef && <BlurView
                    style={styles.blur}
                    viewRef={viewRef}
                    blurType={"light"}
                    blurRadius={20}
                    blurAmount={20}
                    downsampleFactor={5}
                    overlayColor={"light"}
                // reducedTransparencyFallbackColor="white"
                />
                }
                <Image resizeMethod="auto" resizeMode="cover" source={{ uri: 'asset:/images/images/imageMy.webp' }} style={[styles.previewImage]} />

            </View>}
        </View >
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: colors.black,
        zIndex: 9999999
    },
    closeBtn: {
        flexDirection: 'row',
        position: 'absolute',
        right: 15,
        top: deviceHeight * 0.13 - 75,
        zIndex: 9999,
        backgroundColor: colors.noThemeBg,
        width: 36,
        height: 36,
        borderRadius: 20,
        alignItems: 'center',
        alignContent: 'center',
        justifyContent: 'center'
    },
    closeIcon: {
        textAlign: 'center'
    },
    previewImageContainer: {
        flex: 1,
        width: '100%',
        alignSelf: 'center',
        flexDirection: 'column',
        overflow: 'hidden',
        borderColor: colors.mainBgMid,
    },
    offContainer: {
        position: 'absolute',
        top: 20,
        flexDirection: 'row',
        alignSelf: 'center',
        zIndex: 99
    },
    offText: {
        color: colors.powerBtnOn,
        fontFamily: 'Montserrat-SemiBold',
        fontSize: 14,
        lineHeight: 16,
        alignSelf: 'center',
        marginLeft: 10
    },
    colorMaskContainer: {
        position: 'absolute',
        top: '15%',
        height: '65%',
        width: '100%',
        backgroundColor: "#000",
    },
    colorMask: {
        position: 'absolute',
        alignSelf: 'center',
        width: '100%',
        backgroundColor: "#000",
    },
    blur: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0
    },
    previewImage: {
        position: 'absolute',
        height: '100%',
        width: '100%',
    }
});


export default AndroidPreviewScreen;

I want to blur where I try to refer to viewRef. The reference value I gave in BlurView points to that View.