Example is giving an error : Cannot destructure undefined

[rikinshah23]

Hello All,
I am trying sample code in rn version "0.61.5" with react hooks.

import React, { useState, useEffect } from "react";
import { FlatList, View, StyleSheet } from "react-native";
import firestore from "@react-native-firebase/firestore";
import { useSelector, shallowEqual, useDispatch } from "react-redux";
import { theme, deviceWidth, deviceHeight } from "../../utils/theme";
import {
  emailValidator,
  passwordValidator,
  firstNameValidator,
  lastNameValidator,
} from "../../utils/utils";
import styles from "../../utils/styles";
import {
  Surface,
  Text,
  TextInput,
  ActivityIndicator,
  Button,
} from "react-native-paper";
var AlphabetListView = require('react-native-alphabetlistview');

const contacts = {
  'A': [{ name: 'A1' }, { name: 'A2' }, { name: 'A3' }],
  "E": [{ name: 'E1' }, { name: 'E2' }, { name: 'E3' }, { name: 'E4' }],
  'F': [{ name: 'F1' }, { name: 'F2' }, { name: 'F3' }],
  'H': [{ name: 'H1' }, { name: 'H2' }, { name: 'H3' }, { name: 'H5' }],
  'J': [{ name: 'J1' }, { name: 'J2' }, { name: 'J3' }, { name: 'J5' }],
  'K': [{ name: 'K1' }, { name: 'K2' }, { name: 'K3' }, { name: 'K5' }],
  'N': [{ name: 'N1' }, { name: 'N2' }, { name: 'N3' }, { name: 'N5' }],
  'Y': [{ name: 'Y1' }, { name: 'Y2' }, { name: 'Y3' }, { name: 'Y5' }, { name: 'Y6' }],
}

export default function OfficeScreen() {
  const [images, setImages] = useState([]);

   function Cell() {

    return (
      <View>
        <Text>S</Text>
      </View>
    )
  }
  return (
    <AlphabetListView
    data={contacts }
    cell={Cell()}
    cellHeight={100}
    sectionHeaderHeight={22.5}
  />
  );
}

I am getting below error :

Could anyone pls help me running this basic example? Thanks