Refactor for Performance and Best Practices

You're a software engineer at Wonderschool working on the childcare center dashboard. A teammate put together the component below to show a center director the roster of enrolled children, with a toggle to hide waitlisted kids. It technically works in a demo, but directors report the page flickers, sometimes shows the wrong child's row highlighted after adding a child, and occasionally throws a warning about updating state on an unmounted component when switching between centers quickly.

import { useEffect, useState } from "react";

interface Child {
  id: string;
  name: string;
  age: number;
  waitlisted: boolean;
}

function EnrollmentList({ centerId }: { centerId: string }) {
  const [children, setChildren] = useState<Child[]>([]);
  const [filters, setFilters] = useState({ hideWaitlisted: false });

  useEffect(() => {
    fetch(`/api/centers/${centerId}/children`)
      .then((res) => res.json())
      .then((data) => setChildren(data));
  });

  function addChild(child: Child) {
    children.push(child);
    setChildren(children);
  }

  const visible = children
    .filter((c) => !filters.hideWaitlisted || !c.waitlisted)
    .sort((a, b) => a.age - b.age);

  return (
    <ul>
      {visible.map((c, index) => (
        <li key={index}>
          {c.name} ({c.age})
        </li>
      ))}
    </ul>
  );
}

export default EnrollmentList;

Refactor this in your explanation: walk through every functional problem you'd fix and why the symptom the directors are seeing traces back to it, and describe the modern-React idioms you'd apply.