Tailwind, Twin-macro, Styled Components className override priority

I'm creating a custom Section component using styled-components, twin-macro, tailwind css. The default styling is stored in StyledSection constant.

import tw, { styled } from "twin.macro";

const Section = (props) => {
    return (
        <StyledSection
            className={props.className}
            style={{ backgroundImage: `url(${props.backgroundImage})` }}
        >
            {props.children}
        </StyledSection>
    );
};

const StyledSection = styled.section(tw`py-20 bg-no-repeat bg-cover bg-center`);

export default Section;

However, I want to override the styling if I pass something on the component, for it to more reusable.

Example of passing override class in the Section component:

<Section className="my-override-class" />

However, the styled-components classes is being priotized. Please refer to the picture below for the render output.

Image reference for the render output