z-order problem between views in react-native

Note: I am searching for a solution that works for android.

I have the following hierarchy:

Main App:
     <View>
          <View>
              <Button title="Click Me!" />
          </View>

          <MyCustomElement />
     </View>

MyCustomElement:

     //overlay
     <View style={
                  height: '100%',
                  width: '100%',
                  backgroundColor: 'rgba(0, 0, 0, 0.25)',
                  position: 'absolute',
                  top: '100%',
                  left: 0,
                  alignItems: 'center',
                 }
      >
        //content
        <View style={
                      height: 100,
                      width: 100,
                      backgroundColor: 'red',
                    } 
        />

      </View>

The following is the obtained result:

I googled a bit and found that to alter z-order of views, I can use elevation, however it produces this artifact (the shadow at the edges of the screen, since my overlay color is transparent):

Lastly, I even tried to change only the elevation value of the red child, but it produces result as observed in 1st screenshot.

I am expecting the output as of 2nd only without the shadows.