I have here a problem on overlapping the button on another button. I wanted to follow the pic I've attached below

Codesandbox

Update

Move the image to be a background image and tweaked the positioning.

const MainButton = styled.button`
  border-radius: 50%;
  border: 2px solid red;
  position: relative;
  background-color: #fff;
  background-image: ${({ src }) => `url(${src});`}
  background-position: center center;
  background-size: contain;
  display: block;
  width: 40px;
  height: 40px;
  position: relative;
  margin-bottom: 0.5rem;
  cursor: pointer;
  & > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
`;

const IconButton = styled.div`
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid red;
  cursor: pointer;
  position: absolute;
  display: block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  position: relative;
  margin-bottom: 0.5rem;
  overflow: hidden;
  text-align: center;
  user-select: none;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%);

  & > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
`;