I am trying to apply a specific style to all divs for class within a div except for the last one. I’ve done this a few times, but for whatever reason it’s not working like the others. Am I missing something? It’s currently just applying the 24px bottom margin to all StyledDiv

const StyledDiv = styled.div`
  width: 100%;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;

&:last-child {
  margin-bottom: 0;
}
`;

<div>
   <StyledDiv id='childDiv'>
       <p>Hello World 1</p>
   </StyledDiv>
   <StyledDiv id='childDiv'>
       <p>Hello World 2</p>
   </StyledDiv>
   <div>
       <p>Some other text and not a styled div</p>
   </div>
</div>