I have a IconButton on a ListItemButton. When I click on the IconButton I want the ListItemButton button to not show ripple effect and anctivate click. I tried adding stopPropagation but the button is still activated. I can remove this by using disableRipple and removing click event. However, it’s not smooth. What is the best way to resolve this?

const handlePin = (event: React.MouseEvent<HTMLElement>, network: string) => {
        event.nativeEvent.stopPropagation();
        event.stopPropagation();
        console.log("event", event);
        if (!pined) {
            LocalStorageService.appendValueIfNotExist(
                LocalStorageService.SIDE_NAV_PINNED_NETWORKS,
                network
            );
        } else {
            LocalStorageService.removeValueIfNotExist(
                LocalStorageService.SIDE_NAV_PINNED_NETWORKS,
                network
            );
        }
        setPined(!pined);
        props.pinedChanged();
    };

<ListItemButton dense={true}>
            <ListItemIcon style={{ minWidth: "40px" }}>
                {props.item.icon}
            </ListItemIcon>
            <ListItemText primary={props.item.title} />
            <IconButton
                
                onClick={(e) => handlePin(e, props.item.title)}
            >
                {pined ? (
                    <PushPin style={{ fontSize: 18 }} />
                ) : (
                    <PushPinOutlined style={{ fontSize: 18 }} />
                )}
            </IconButton>
            
        </ListItemButton>