Type Error in filter function

I am trying to make a autocomplete text box in React Native. I am getting an error in filter function. When the user types the services then the text box should get autocompleted with the full name of the service.The service name is coming from my json file. I am using 'react-native-autocomplete-input' in order to accomplish this. Below is the screen shot of the error:

Image may be NSFW.
Clik here to view.

Below is my App.js code.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */



import service from './services.json';


import Autocomplete from 'react-native-autocomplete-input';
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';



class Autocomp extends Component {
  static renderServices(coservice) {
    const { ser, Location, secondLoc} = coservice;


    return (
      <View>
        <Text style={styles.titleText}>{ser}</Text>
        <Text style={styles.openingText}>{secondLoc}</Text>
      </View>
    );
  }

  constructor(props) {
    super(props);
    this.state = {
       query: '',
       services:[]
    };
  }

  componentDidMount(){
      const {results: services} = service;
      this.setState({services});

  }




    findServices(query) {
      const inputValue = query.trim().toLowerCase();
      const inputLength = inputValue.length;

      const { services } = this.state;
      return inputLength === 0 ? [] : services.filter(ser =>ser.toLowerCase().slice(0, inputLength) === inputValue);
  }




  render() {
    const { query } = this.state;
    const services = this.findServices(query);
    const comp = (a, b) => a.toLowerCase().trim() === b.toLowerCase().trim();

    return (
      <View style={styles.container}>
        <Autocomplete
          autoCapitalize="none"
          autoCorrect={false}
          containerStyle={styles.autocompleteContainer}
          data={services.length === 1 && comp(query, services[0].ser) ? [] : services}
          defaultValue={query}
          onChangeText={text => this.setState({ query: text })}
          placeholder="Enter Services here"
          renderItem={({ ser, Phone }) => (
            <TouchableOpacity onPress={() => this.setState({ query: ser })}>
              <Text style={styles.itemText}>
                {ser} 
              </Text>
            </TouchableOpacity>
          )}
        />
        <View style={styles.descriptionContainer}>
          {services.length > 0 ? (
            Autocomp.renderServices(services[0])
          ) : (
            <Text style={styles.infoText}>
              Enter services
            </Text>
          )}
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F5FCFF',
    flex: 1,
    paddingTop: 25
  },
  autocompleteContainer: {
    flex: 1,
    left: 0,
    position: 'absolute',
    right: 0,
    top: 0,
    zIndex: 1
  },
  itemText: {
    fontSize: 15,
    margin: 2
  },
  descriptionContainer: {
    // `backgroundColor` needs to be set otherwise the
    // autocomplete input will disappear on text input.
    backgroundColor: '#F5FCFF',
    marginTop: 25
  },
  infoText: {
    textAlign: 'center'
  },
  titleText: {
    fontSize: 18,
    fontWeight: '500',
    marginBottom: 10,
    marginTop: 10,
    textAlign: 'center'
  },
  directorText: {
    color: 'grey',
    fontSize: 12,
    marginBottom: 10,
    textAlign: 'center'
  },
  openingText: {
    textAlign: 'center'
  }
});
export default Autocomp;

Below is my services.json file

{
    "id":1,
    "ser": "Service1",
    "Location": "TestLoc1",
    "Phone":"(999)-921-9292",
    "SecondLoc": "TestLoc",
    "email":"accrmail@test.com",
    "sourceLat":"33.977806",
    "sourceLong":"-117.373261",
    "destLatL1":"33.613355",
    "destLongL1":"-114.596569",
    "destLatL2":"33.761693",
    "destLongL2":"-116.971169",
    "destAddr1": "Test Drive, 99999",
    "destAddr2": "Test City, Test Drive, 92345"
  },

  {
    "id":1,
    "ser": "TestService",
    "Location": "TestLoc1",
    "Phone":"(999)-921-9292",
    "SecondLoc": "TestLoc",
    "email":"accrmail@test.com",
    "sourceLat":"33.977806",
    "sourceLong":"-117.373261",
    "destLatL1":"33.613355",
    "destLongL1":"-114.596569",
    "destLatL2":"33.761693",
    "destLongL2":"-116.971169",
    "destAddr1": "Test Drive, 99999",
    "destAddr2": "Test City, Test Drive, 92345"
  },
  ]

any help will be highly appreciated. I checked the function. everything looks correct.