Bootstrap Modal causes useEffect({…}, []) to trigger again

When using the Bootstrap <Modal /> component, when I do callbacks to the parent component, my entrie page rerenders, and triggers my useEffect({...}, [])-Hook, which should only be called once, to be called again, but I do not know why.

My Setup: NextJS, ReactJS, Bootstrap-React

Home() - Parent:

export default function Home() {
  //data and internal logic states, table-content, which rows are selected, is the data still loading, etc.
  const [loading, setLoading] = useState(true);
  const [dataZähler, setDataZähler] = useState<ZählerObjekt[]>([]);
  const [dataProtokoll, setDataProtokoll] = useState<ProtokollEintrag[]>([]);
  const [selectedRowZähler, setSelectedRowZähler] = useState(-1);
  const [selectedRowProtokoll, setSelectedRowProtokoll] = useState(-1);
  //View-Logic states, which table is shown, if modals should be seen, etc
  const [showCreateZählerModal, setShowCreateZählerModal] = useState(false);

  //on start, load both csv's into states
  useEffect(() => {
    fetch('/api/loadCsv')
      .then((res) => res.json())
      .then((data) => {
        setDataZähler(data.dataZähler)
        setDataProtokoll(data.DataProtokoll)
        setLoading(false)
      })
  }, []);

  //rendering logic, the page only needs the data to work, so thats all thats needed, otherwise, show an error and have the user restart
  if (loading) return <p>loading ...</p>
  if (!dataZähler) return <p>No data on counters was found!</p>
  if (!dataProtokoll) return <p>No data on entries was found!</p>

  return (
    <div className="flex flex-col">
      <table> /* contains data, that gets edited when the modal is used/calls its callback */ </table>
      {/*Modal Div - all edit/Cancel/Save/Create/Delete modals go here*/}
      <div>
        <Modal size="lg" show={showCreateZählerModal} onHide={() => setShowCreateZählerModal(false)}>
          <Modal.Header closeButton>
            <Modal.Title>
              Neuen Zähler hinzufügen:
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <CreateCounterPopUp data={dataZähler[0]} callback={(data) => {
              if (data)
                setDataZähler([...dataZähler, data]);
              setShowCreateZählerModal(false);
            }} />
          </Modal.Body>
        </Modal>
      </div>
    </div>
  );
}

CreateCounterPopUp() - Child:

interface CounterProps {
    data: ZählerObjekt, //seed the PopUp
    callback: ZählerCallback //(only requires a Zählerobjekt)
}

export function CreateCounterPopUp({ data, callback }: CounterProps) {
    const [newCounter, setNewCounter] = useState(new ZählerObjekt());

    function handleSpeichern() { //dont forget to set the id of the new object
        setNewCounter({ ...newCounter, ...{ id: generateGenericObjectID(newCounter) } });
        callback(newCounter);
    }

    function handleInputChange(field: string, event: ChangeEvent<HTMLInputElement>) {
        const newState = { ...newCounter };
        newState[field as keyof ZählerObjekt] = event.target.value;
        setNewCounter(newState);
    }

    return (
        <div>
            <form>
                {Object.entries(newCounter).slice(1).map((elem, idx) => {
                    return (
                        <Form.Group
                            className="mb-3" key={idx} controlId={elem[0]}
                        >
                            <Form.Label>{elem[0]}</Form.Label>
                            <Form.Control
                                as="textarea"
                                rows={2}
                                placeholder={"z.B. " + String(data[elem[0] as keyof ZählerObjekt])}
                                onChange={(e) => handleInputChange(elem[0], e as any)} />
                        </Form.Group>
                    );
                })}
                <div className="float-right">
                    <button onClick={handleSpeichern} className="bg-[#22c55e] border-[none] text-[white] text-center inline-block text-base rounded-[5px] px-5 py-3 my-2">Speichern</button>
                </div>
            </form>
        </div>
    );
}

I tried to reduce the size of the page to the most important parts, but can anyone tell me why the modal triggers a full Home() rerender, when the Modal makes use of the callback, but not when its onHide() property is called?