React not updating state?

I´m new to react. I´m trying to fetch an endpoints array. and I want to update the api's status every 15 seconds. I´m trying to do this

export const endpoints: string[] = [
  "accounts/health/status",
  "assets/health/status",
  "customers/health/status",
  "datapoints/health/status",
  "devices/health/status",
  "documents/health/status",
  "forms/health/status",
  "invites/health/status",
  "media/health/status",
  "messages/health/status",
  "namespaces/health/status",
  "orders/health/status",
  "patients/health/status",
  "relationships/health/status",
  "rules/health/status",
  "templates/health/status",
  "users/health/status",
  "workflows/health/status",
];

and I have this proxy in my package.json

  "proxy": "https://api.factoryfour.com/",

Here the rest of my code

const [data, setData] = useState<Response[]>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string[] | null[]>([]);

const effectRan = useRef(false);

  const fetching = async () => {
    setLoading(true);
    endpoints.map(async (endpoint) => {
      return await axios
        .get(endpoint)
        .then((res) => {
          setData((prev) => [...prev, res.data]);
        })
        .catch((err) => {
          setError([...error, err.message]);
        });
    });
    setLoading(false);
  };

  useEffect(() => {
    if (!effectRan.current) {
      fetching();
    }
    return () => {
      effectRan.current = true;
    };
  });

  useEffect(() => {
    setTimeout(async () => {
      setData([]);
      setLoading(true);
      setError([]);

      await fetching();
    }, 15000);
  }, []);

but when the seTimeout runs every card duplicates and the state gets more data than before. even though I´m reseting the state to setData([]) I just want to update the api's status. What can i do?

if (loading) return <Spinner />;
  return (
    <div className="card-container">
      {data.length ? (
        data.map((item) => {
          return (
            <Card
              key={generateKey()}
              hostname={item.hostname}
              message={item.message}
              success={item.success}
              time={item.time}
            />
          );
        })
      ) : (
        <Spinner />
      )}
      {error.length
        ? error.map((err) => (
            <ErrorCard key={generateKey()} message={err as string} />
          ))
        : null}
    </div>
    ```