Why does my function run twice after calling it on page rendering with useEffect?

When I render the page my function handleInitialSearch should run once, but it runs twice. I assume this is because react renders the page twice, but this will break my gitlab pipeline.

Therefore I am trying to prevent it from running again, but it has to run again on a re-render, therefore I cant just run it at the beginning of the session.

"use client"; import { useEffect, useState } from "react";

//bunch of variables

export default function Home() {
useEffect(() => {
    handleInitiateSearch();
  }, []);
}

async function handleInitiateSearch() {
    setLoading(true);
    try {
      const roadsResponse = await fetch(`/api?road=all`);
      const roadsData = await roadsResponse.json();
      console.log("Fetch response:", roadsData);
      setRoads(roadsData.roads);
      if (roadsResponse.status == 201) {
        setError(true);
        setErrorMessage(roadsResponse.statusText);
      }
    } finally {
      setLoading(false);
    }
  }

I tried to disable double rendering by react, but that doesn’t work.