После перемещения состояния из локального состояния в глобальное состояние все кнопки нажимаются одновременно. Как это решить?

Question

Я только что переместил локальное состояние переключателя (вкл / выкл с изображениями) в глобальное состояние, которое в моем случае было переходом от React к Redux. После того, как эти кнопки начали нажиматься сразу, как я могу заставить этот щелчок реагировать только на одну кнопку только на одну кнопку?

Я прилагаю изображение двух разных видов кнопок в моем проекте. Они работают одинаково ... но теперь они запускают все кнопки своего рода, что явно плохо. В случае, если это обычный и простой код для переключения, поэтому он в основном возвращает состояние! В Redux

// buttonActions. js

export const toggle = () => {
    return {
        type: 'TOGGLE'
    };
};

// buttonReducer. js

const buttonReducer = (state = true, action) {
    switch(action.type) {
        case 'TOGGLE':
            return !state;
        default:
            return state;
    }
}

export default buttonReducer;

// код компонента

const Islbutton = props => {
    const [role, setRole] = useState('');

    useEffect(() => {
       if (props.auth.user) { 
           setRole(props.auth.user.role);
       }
    }, []);

    const test = useSelector(state => state.button);

    const checkRole = (role) => {
        if (role === 'Menager' || role === 'Technolog') {
            return true
        } else {
            return false
        };
    }

    const toggleImage = () => {
        if(checkRole(role)) {
            dispatch(toggle());
        };
    }

    const getImageName = () => test ? 'islOnn' : 'islOfff'

    const dispatch = useDispatch();

    return(
        <div>
            <img style={islplace} src={test ? islon : isloff } alt="" 
 onClick={()=> toggleImage()} />      
        </div>
    );
}