State issue - Redux

index.js

const [candidateParties, setCandidateParties] = useState([]);
const dispatch = useDispatch();
const currentParty = useSelector(currentSelectedParty);

useEffect(() => {
    (async () => {
        await fetch(`http://localhost:3000/api/v1/candidates/parties`)
            .then((res) => res.json())
            .then((result) => {
                setCandidateParties(result.parties);
            });
    })();
}, []);

const dispatchNewParty = (party) => {
    dispatch(changeParty(party));
};

return ({
    candidateParties.map((data, key) => {
        return ( <
            button key = {
                key
            }
            type = "button"
            onClick = {
                () => {
                    dispatchNewParty(data);
                }
            }
            data - filter = ".blue"
            className = {
                currentParty === data ?
                "control mixitup-control-active" :
                    "control"
            } >
            {
                data
            } </button>
        );
    })
})