CSS transition is not working on emotion styled component

I have a problem with css transition.
When the selected state value changes, the CSS width changes. I want to apply a transition effect to the width, but if I use a styled component, the transition does not work.

Here is my styled component code:

const Bar = styled.div<{ selected: boolean }>`
  width: 28px;
  height: 6px;
  cursor: pointer;
  border-radius: 8px;
  background-color: #ffffff66;
  transition: width 1s ease;
  ${({ selected }) =>
    selected && `
      width: 40px;
      background-color: #fff;
    `
  }
`;

This code does not use styled components (It worked):

<div
  css={css`
    width: 28px;
    height: 6px;
    cursor: pointer;
    border-radius: 8px;
    background-color: #ffffff66;
    transition: width 1s ease;
    ${selected && "width: 40px; background-color: #fff;"}
  `}
/>

I have no idea why transition is not applied when using styled components. please help me.

Your styled syntax was wrong, and the transition still works but you can not change width and background.

When embedding css string inside a css string, you have to use ThemedCssFunction - css (Template literals)

const Bar = styled.div<{ selected: boolean }>`
    width: 28px;
    height: 6px;
    cursor: pointer;
    border-radius: 8px;
    background-color: #ffffff66;
    transition: width 1s ease;
    ${({ selected }) =>
      selected &&
      // THIS LINE      
      css`
        width: 40px;
        background-color: #fff;
      `}
`;