Content inside KeyboardAwareScrollView becomes blurry or shows transparent backdrop on SDK 33 devices when closing the keyboard

Question

I'm facing an issue with my React Native app where the content inside a KeyboardAwareScrollView becomes blurry or shows a transparent backdrop after the user edits an input field and closes the keyboard by tapping the close button on the keyboard. This problem only occurs on devices running SDK 33.

Here is the relevant part of my code:

import {
  Image,
  Text,
  TouchableOpacity,
  View,
  Keyboard,
  TouchableWithoutFeedback,
} from 'react-native';
import React, {useContext, useState} from 'react';
import styles from './style';
import imagePath from '../../constants/imagePath';
import Input from '../../components/Input';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
import colors from '../../constants/colors';
import Button from '../../components/Button';
import navigationStrings from '../../constants/navigationStrings';
import globalStyle from '../../styles/globalStyle';
import {AuthContext} from '../../context/AuthContext';
import {passwordValidation, phoneNumberValidation} from '../../uitls/Helper';
import Loader from '../../components/Loader';
import {showAlert} from '../../uitls/Helper';

const Login = ({navigation}) => {
  const {login, loginLoader} = useContext(AuthContext);
  const [phoneNo, setPhoneNo] = useState('');
  const [password, setPassword] = useState('');
  const [isVisible, setVisible] = useState(true);

  const submit = async () => {
    if (phoneNo && password) {
      if (phoneNumberValidation(phoneNo)) {
        if (!passwordValidation(password)) {
          showAlert(
            'Warning',
            'The password must be at least 6 characters long and must include at least one uppercase character,one number and one special character',
          );
          return;
        }
        login(phoneNo, password);
      } else {
        showAlert('Warning', 'Invalid Phone no');
      }
    } else {
      showAlert('Warning', 'Please fill all the details');
    }
  };

  return (
    <View style={{flex:1}}>
      <KeyboardAwareScrollView style={styles.container}>
        <View style={styles.loginContainer}>
          <Image source={imagePath.logo} style={styles.imgStyle} />
          <Text style={styles.heading}>Sign In</Text>
          <Input
            placeHolder="Mobile Number *"
            value={phoneNo}
            onChangeText={value => setPhoneNo(value)}
            keyboardType="numeric"
            maxLength={10}
          />
          <Input
            placeHolder="Enter password *"
            floatingLabel={'Password *'}
            value={password}
            onChangeText={value => setPassword(value)}
            secureTextEntry={isVisible}
            rightIcon={isVisible ? imagePath?.hideEye : imagePath?.showEye}
            onPressRight={() => setVisible(!isVisible)}
            autoCapitalize="none"
          />
          <View style={styles.textRowcontainer}>
            <TouchableOpacity>
              <Text style={styles.text2}>Login with OTP</Text>
            </TouchableOpacity>
            <TouchableOpacity>
              <Text style={styles.text2}>Forgot password?</Text>
            </TouchableOpacity>
          </View>
          <Button btnStyle={styles.btn} title={'Submit'} onPress={submit} />
          <View
            style={{
              ...globalStyle.rowContainer,
              marginVertical: 10,
              marginTop: 20,
              alignSelf: 'center',
            }}>
            <Text style={styles.footerText}>Don’t have an account? </Text>
            <TouchableOpacity
              onPress={() => navigation.navigate(navigationStrings.REGISTER)}>
              <Text style={{...styles.footerText, color: colors.blue}}>
                Sign Up
              </Text>
            </TouchableOpacity>
          </View>
        </View>
        <Loader visible={loginLoader} />
      </KeyboardAwareScrollView>
    </View>
  );
};

export default Login; 

KeyboardAwareScrollView is working fine on SDK 34 and SDK 32 emulator issue is with scrollview if i replace the KeyboardAwareScrollView with scrollview some issue exists

blue login page

Has anyone encountered this issue before, and is there a known workaround or solution for this problem?

Thanks in advance for your help!