React Native: react-native-image-picker library's launchImageLibrary function is not opening the photo library

Question

I am building an IOS application using React Native. I am now implementing a feature for my application where user has to pick a photo from the library. I am using this library, react-native-image-picker (https://github.com/react-native-image-picker/react-native-image-picker) for picking photo and this library, react-native-permissions (https://www.npmjs.com/package/react-native-permissions) for managing permissions before picking the photo. But it is not opening the photo picker screen.

This is my code.

const CreateMenuCategory: FC<{}> = (props: {}) => {
    const generateTestHook = useCavy();

    const checkImageLibraryPermission = async (): Promise<'granted' | 'limited' | false> => {
        try {
            const result = await check(
                isIOS()
                    ? PERMISSIONS.IOS.PHOTO_LIBRARY
                    : PERMISSIONS.ANDROID.READ_MEDIA_IMAGES
            );

            if (result == RESULTS.GRANTED || result == RESULTS.LIMITED) {
                return RESULTS.GRANTED == result? 'granted': 'limited';
            } else {
                return false;
            }
        } catch (e) {
            toastErrorMessage({
                message: `Unable to check image library permission.`
            });
            return false;
        }
    };

    const requestImageLibraryPermission = async (): Promise<'granted' | 'limited' | boolean> => {
        const permissionState = await checkImageLibraryPermission();
        if (! permissionState) {
            return false;
        }
        try {
            const result = await request(
                isIOS()
                    ? PERMISSIONS.IOS.PHOTO_LIBRARY
                    : PERMISSIONS.ANDROID.READ_MEDIA_IMAGES
            );

            if (result === RESULTS.GRANTED || result === RESULTS.LIMITED) {
                return RESULTS.GRANTED == result? 'granted': 'limited';
            } else {
                return false;
            }
        } catch (e) {
            toastErrorMessage({
                message: `Unable to request image library permission.`
            });
            return false;
        }
    };
    
    const handleOpenImageLibraryButtonPress = async () => {
        const permissionState = await requestImageLibraryPermission();
        if (! permissionState) {
            return;
        }
        
        ImagePicker.launchImageLibrary(
          {
              selectionLimit: 1,
              mediaType: 'photo',
              includeBase64: false
          },
          (response) => {
                //TODO: do something with the result
          });
    };

    return (
        <ScreenContainer>
            <TestableView
                ref={generateTestHook(
                    `Scene.CreateMenuCategoryScreenContainer`
                )}>
                <Button onPress={handleOpenImageLibraryButtonPress}>
                    Select Image From Library
                </Button>
            </TestableView>
        </ScreenContainer>
    );
};

export default CreateMenuCategory;

I also added the required permissions in the plist file. When I pressed, Select Image From Library button for the first time, it opened up the permission dialog and show photo library. Then. when I pressed it again, it is not doing anything. Also, the permission is limited. What is wrong with my code and how can I fix it?