I'm trying to build a filter search bar function that filters through a set amount of objects from an API. I keep getting this error "uncaught in promise keyword.toLowerCase() is not a function" error and not sure why. My goal is to start typing in a name and have it filter through the list, but I can't get the list and the search bar to work together.

I have done console.log(listStudents) to try and see what value I should be using, but I'm not sure how to specify the correct value - searching by name - whether first or last - and what would work. I have also tried various specific values, like data.student and data.firstName etc but it doesn't work.

Here is my FilterSearch component:

export default function FilterSearch() {
  const [name, setName] = useState(" ");
  const [foundUsers, setFoundUsers] = useState([]);

  const filter = (keyword) => {
    setName(keyword); 
    if (!keyword || keyword !== " ") {
      setFoundUsers([]); 
    }
    axios.get(USERS).then((listStudents) => {
      console.log(listStudents);
      const results = listStudents.data.students.filter((keyword) => {
        return name.toLowerCase(keyword).startsWith(keyword.toLowerCase());
      });
      setFoundUsers(results);
    });
  };

  return (
    <div className="container">
      <form>
        <input
          type="search"
          value={name}
          onChange={(e) => {
            filter(e.target.value);
          }}
          className="input"
          placeholder="Filter"
        />
        ;
      </form>

      <div className="user-list">
        {foundUsers && foundUsers.length > 0 ? (
          foundUsers.map((name) => <StudentInfo name={name} />)
        ) : (
          <h1>No results found!</h1>
        )}
      </div>
    </div>
  );
}

Can someone help me identify where I can fix this to make the API and the search bar work together?