React useEffect returning duplicate data when setting state variables

I am attempting to fetch data from my database using useEffect, then manipulate the data and add it to a state variable. Below is an example.

However, I am getting duplicate rows. How can I fetch data in useEffect, then manipulate it (i.e. use .map to change values), and assign to state variable?

import React, { useEffect, useState } from "react";
import axios from "axios";

const Datacollect = () => {
  // init state for userInfo
  const [users, setUsers] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await axios.get("https://jsonplaceholder.typicode.com/comments");
        setUsers(prev=>[...prev,res.data])
      } catch (err) {
        console.log(err);
      }
      fetchData();
    };
  });
  return <div className="datacollect">
    <div className="user">hello, length is: {users.length}</div>
  </div>;
};

export default Datacollect;