Resolved: React Redux – mapDispatchToProps called for every event in a map function

export function ProjectComponent({
  selectedProject,
  projects,
  onSelectProject,
  onGetProjects,
}) {
  useInjectReducer({ key, reducer });
  useInjectSaga({ key, saga });

  useEffect(() => {
    onGetProjects();
  }, []);

  return (

    { projects.map((project, index) => {
       return <ul key={project.id} className="project">
                  <li>{project.name}</li>
                  <li>{project.createdAt}</li>
                  <li><a onClick={onSelectProject(project.id)} href="#" title="Preview this Project"><img src={view_icon} alt="view through icon"/></a></li>
              </ul>
    })}

);
}
const mapStateToProps = createStructuredSelector({
  projects: makeSelectProjects(),
  selectedProject: makeSelectProject()
});

export function mapDispatchToProps(dispatch) {
  return {
    onSelectProject: (id) => {
      console.log(id); 
      dispatch(selectProject(id));
    }
    onGetProjects: () => {
      dispatch(getProjects());
    }
  };
}

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
);

export default compose(
withConnect, 
)(ProjectComponent);

onClick={() => onSelectProject(project.id)}