MUI System - Styled component

Question

I have created MyComponent( called 'InnerContainer' ) by using MUI system; styled-component. But onClick under the styled component is not working. It is working outside 'InnerContainer' but not working inside 'InnerContainer'. Don't know the reason.. please help me why it's not working.

import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { styled } from "@mui/system";
// import styled from '@emotion/styled'
import DeleteIcon from "@mui/icons-material/Delete";

function DraggableBox(props) {
  const { attributes, listeners, setNodeRef, transform, transition } =
    useSortable({ id: props.id });

  // console.log("props", props);

  const outerContainer = {
    transform: CSS.Transform.toString(transform),
    transition,
    backgroundColor: props.color,
    width: "20%",
    height: "25%",
    display: "inline-block",
  };
  
  
  const InnerContainer = styled("div")({
    width: "100%",
    height: "100%",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "end",
    fontWeight: "600",
    "&:hover svg": {
      color: "white",
      transform: "scale(1.3)",
      transition: "0.5s",
    },
    " .inBoxName": {
      marginLeft: "0.5rem",
    },
    " .inBoxTrash": {
      marginRight: "0.5rem",
    },
  });

  return (
    <div style={outerContainer} ref={setNodeRef} {...attributes} {...listeners}>
      <InnerContainer>
        <div className="inBoxName">{props.name}</div>
        <div className="inBoxTrash">
          <DeleteIcon onClick={() => props.removeColorBox(props.id)} />
        </div>
      </InnerContainer>
    </div>
  );
}

export default DraggableBox;