Information not passing into component - reactjs

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
},
});