作为回应，你不应该直接修改dom。相反，你应该创建一个或多个状态变量，并在你想要重新渲染的时候改变这些状态。在你的例子中，因为你想要1-N个<SingleInvite>，最自然的状态是一个数组。我不确定你需要数组中的每个元素的数据，所以我只给予它们一个唯一的标识符。

let uniqueId = 0;

const SomeComponent = () => {
  const [invites, setInvites] = useState([]);

  const newInvite = () => {
    uniqueId++;
    setInvites(prev => [...prev, { id: uniqueId }]); 
  }

  return (
    <>
      <div className="container">
        {invites.map((invite, index) => (
           <SingleInvite key={invite.id} index={index} />
        )}
      </div>

      <button className="add-another" onClick={newInvite}>
        <img src={plus} className="plus" alt="" /> Add another
      </button>
    </>
  )
}

如果你确定除了邀请数量之外不需要任何其他数据，你可以使用一个数字来表示状态。尽管大多数现实世界的例子都有一点复杂，所以你需要使用如上所示的数组方法。
下面是一个以数字作为状态的示例：

const someComponent = () => {
  const [numInvites, setNumInvites] = useState(0);

  const newInvite = () => {
    setNumInvites(prev => prev + 1);
  }

  const inviteElements = [];
  for (let i = 0; i < numInvites; i++) {
    inviteElements.push(<SingleInvite key={i} index={i} />)
  }

  return (
    <>
      {inviteElements}
      <button className="add-another" onClick={newInvite}>
        <img src={plus} className="plus" alt="" /> Add another
      </button>
    </>
  )
}

使用React时，应该避免直接操作DOM，因为这违背了所有React原则。
您可能需要阅读以下文档：conditional rendering with React
看起来您正在尝试在onClick容器中呈现newInvite组件。更好的方法是：

// App.jsx
import React, {useState} from "react";
// Import your component you want to conditionally render
import newInvite from "./components/newInvite/NewInvite";

const App = () => {
// Hold the show/noshow boolean in local state
const [showNewInvite, setShowNewInvite] = useState();

// handle onClick
const handleShowNewInvite = () => {
    setShowNewInvite(true);
};

// render imported <newInvite> if state's showNewInvite === true
return (
    <div className="container">
        <button onClick={() => handleShowNewInvite}>
        { showNewInvite && <newInvite /> }
    </div>
);
}

export default App;