How to move the called function to useEffect?

Question

JavaScript

Constant error "React Hook useEffect has a missing dependency: 'userData'. Either include it or remove the dependency array react-hooks/exhaustive-deps"

It has been suggested on the internet to move the function inside the hook. I'm new to react and don't know how to fix this if the handleChange function is called below. Please tell me how to do it?

import data from "../Data/data";

const userData = data;
const [users, setUsers] = useState([]);
const [selectedUser, setSelectedUser] = useState([]);

  useEffect(() => {
    setUsers(userData);
  }, []);

  // console.log('selectedUser);


  const handleChange = (e, data) => {
    const { name, checked } = e.target;
    if (checked) {
      if (name === "allSelect") {
        setSelectedUser(users);
      } else {
        setSelectedUser([...selectedUser, data]);
      }
    } else {
      if (name === "allSelect") {
        setSelectedUser([]);
      } else {
        let tempuser = selectedUser.filter((item) => item.id !== data.id);
        setSelectedUser(tempuser);
      }
    }
  };

return(
<input
                    type="checkbox"
                    className="form-check-input"
                    name="allSelect"
                    // allSelect selected when both length equal
                    // slecteduser === allUser
                    checked={selectedUser?.length === users?.length}
                    onChange={(e) => handleChange(e, users)}
                  />
)

Answer 1

if data is just imported, then throw away useEffect and write
const [users, setUsers] = useState(data);

Answer 2

This is not exactly an error, this is a warning linter, it says that useEffectyou need to specify a dependency on userData for:

useEffect(() => {
    setUsers(userData);
  }, [userData]);