When does memo help, and why do inline objects and functions break it?

const TeaList = memo(function TeaList({ teas, options, onAdd }) {
  // slow: renders hundreds of rows
});
 
function Shop({ teas }) {
  const [note, setNote] = useState("");
  return (
    <>
      <input value={note} onChange={(e) => setNote(e.target.value)} />
      <TeaList teas={teas} options={{ inStock: true }} onAdd={(tea) => addToCart(tea)} />
    </>
  );
}