Information not passing into component

Question

In the code sample below, I am trying to show results.length but it does not show. The information is coming from the App.js screen, a filter function which I have pasted below. When I call <ResultsList reults={filtersResultsByPrice('$')} title='Cost Effective'/>, there may not be anything that is actually being sent into the ResultsList.js screen.

Here is the repo: https://github.com/elaitman1/React-Native-Hooks-Project-1

ResultsList.js:

import React from  'react'
import {Text, View, StyleSheet} from 'react-native'

const ResultsList = ({title, results}) => {

    if (results == null){
        return null
    }else{
        return (
        <View>
            <Text style={styles.title}>{title}</Text>
            <Text style={styles.title}>results: {results.length}</Text>
        </View>
        )
    }
}

const styles = StyleSheet.create({
    title:{
        fontSize: 18,
        fontWeight: 'bold'
    }
})

export default ResultsList



App.js:
import { StyleSheet, Text, View } from 'react-native';
import SearchBar from './src/Components/SearchBar'
import React, {useState} from 'react'
import useResults from './src/hooks/useResults'
import ResultsList from './src/Components/ResultsList'

export default function App() {
const [term, setTerm] = useState('')
const [searchApi, results, errorMessage] = useResults()

const filtersResultsByPrice = (dollarSign) =>{
  return results.filter((result) => {
    return result.price === dollarSign
  })
}
  return (
    <View>
    <SearchBar 
      term={term}
      onTermChange={setTerm}
      onTermSubmit={() => searchApi(term)} 
    />
    {errorMessage ? <Text>{errorMessage}</Text> : null}
    <Text>We have found {results.length} results</Text>
    <ResultsList reults={filtersResultsByPrice('$')} title='Cost Effective'/>
    <ResultsList reults={filtersResultsByPrice('$$')} title='Bit Pricier'/>
    <ResultsList reults={filtersResultsByPrice('$$$')} title='Big Spender'/>

    </View>
  );

}

const styles = StyleSheet.create({
  container: {
    borderColor: 'black',
    height: 40,
    borderWidth: 3,
    marginTop: 40
  },
});