so I am trying to make a filter search. I am calling the function using

      <h2>Numbers</h2>
      {
        persons.map((persons) => <Persons persons={persons} setFilter= {setFilter} key={persons.id} />)
      }
    </div>

so I created an array using map however when I pass it through

  const Persons = ({ persons, setFilter }) => {
    const checkPersonsName = setFilter === '' ? 
      persons
    :
      persons.filter((person) => person.name.toLowerCase().includes(setFilter) )
    return (<li>{checkPersonsName.name} {checkPersonsName.number}</li>)

  }
  

it gives me an error saying:

Uncaught TypeError: persons.filter is not a function.

I did a console.log and persons should be an array. so I am not quite sure what to do here and why I am getting this error.