How to pass a prop on a external style-component on react-typescript?

Question

How do i pass a prop into a external styled-component? i am new in passing props into a style-component.

interface PricingStyledComponents {
      recommended?: string
    }
    export const SubButton = styled.button<PricingStyledComponents>`
      &{
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: ${({ recommended }) => (recommended ? 'black' : 'white')};
        border-radius: 10rem;
        z-index: -2;
    `

I have a component (PriceCards.tsx) which should providing the value of recommended.

export const PriceCards = (props: Props) => {
  return (
  <>
    <PricingTab recommended/>
  </>
)}