emotion/styled nested class interpolation not working with linter or jest

Question

Targeting a child component StyledHighlight

<StyledButton>
  <StyledHighlight />
</StyledButton>

const StyledHighlight = styled.span`
    display: block;
`;

const StyledButton = styled.button`
    & > ${StyledHighlight} {
        display: none;
    }
`;

---

Getting a lint error similar to this:

Invalid type "StyledComponent<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "contextMenu" | ... 253 more ... | "css">, object>" of template literal expression  @typescript-eslint/restrict-template-expressions

Also, our jest test is no longer passing, it doesn't see the inherited display: none and thinks the display is always 'block', though our storybook shows it rendering correctly.

Interestingly, background-color does seem to propagate (when using another method span[data-testid="styled-highlight"], not sure about the class interpolation), but still not display

Does anyone know what I might be missing with emotion/styled, typescript, and jest?

I haven't seen much information about this online, but this answer seems to validate that this is a legitimate way to target a child