Fix View Not Updating

ZoomInfo's contact directory lets a sales rep search contacts and star the important ones. Here is the component behind that screen.

import { useEffect, useState } from "react";

interface Contact {
  id: string;
  name: string;
  company: string;
  starred: boolean;
}

function ContactList({ searchTerm }: { searchTerm: string }) {
  const [contacts, setContacts] = useState<Contact[]>([]);

  useEffect(() => {
    fetchContacts(searchTerm).then((results) => {
      setContacts(results);
    });
  }, []);

  function toggleStar(id: string) {
    const target = contacts.find((c) => c.id === id);
    if (target) {
      target.starred = !target.starred;
      setContacts(contacts);
    }
  }

  function addContact(newContact: Contact) {
    contacts.push(newContact);
    setContacts(contacts);
  }

  return (
    <ul>
      {contacts.map((contact, index) => (
        <li key={index}>
          {contact.name} at {contact.company}
          <button onClick={() => toggleStar(contact.id)}>
            {contact.starred ? "Starred" : "Star"}
          </button>
        </li>
      ))}
    </ul>
  );
}

Reps report that searching for a new term does not refresh the list, and that starring a contact sometimes does not visibly update the button. Identify why the view is not updating in each case, and propose fixes. Explain what you would change and why, you do not need to submit corrected code.