React styled components does not recognise props

I'm using react styled components and react-responsive hooks for media-query. My problem is when trying to pass the variable that contains the matching window size, to the styled component CSS.

After importing the hook, I defined the window sizes and assigned to "big" and "mobile" screen. The following variables returns a boolean if the conditions are meet:

 const isMobile = useMediaQuery({ query: '(max-width: 600px)' });
 const isBigScreen = useMediaQuery({ query: '(min-width: 600px)' });

The next step is to create the Styled components in the render() component and in the .styles.js file. The three components from the render() are inside a paragraph tag.

My goal is to pass the props to the styling and if the width isMobile, the component inside the tag will hide the overflow text in the ellipse dots (...);

          {/* House details */}
            <HouseDetailsInfo>
                <p>{house.city}</p>
                <p>{house.street}</p>
                {/* <p>Price: {house.price} £ / {house.typeOfTenancy}</p> */}
                <p>
                    <HousePriceEl isBigScreen isMobile={isMobile}>Price: </HousePriceEl>
                    <HousePriceNr isBigScreen isMobile={isMobile}>{house.price}£ </HousePriceNr>
                    <HouseTenancy isBigScreen isMobile={isMobile}>, {house.typeOfTenancy}</HouseTenancy>
                </p>
            </HouseDetailsInfo>

The following css are created in the component.styles.js file:

export const HouseDetailsInfo = styled.div`
    display:            flex;
    flex-direction:     column;
    justify-content:    space-around;
    max-width: inherit;

    & > p {
        margin:         0;
        padding:        5px 10px 5px 5px;

        width:          ${props => props.isMobile    ? "180px"           : "inherit"};
        background:     ${props => props.isBigScreen ? Colors.darkGrey   : Colors.orange};
        white-space:    nowrap;
        overflow:       hidden;
        text-overflow:  ellipsis;
    }
`;

I tried also to log the width props in the main element, and is working. But no matter what I do, the styles are not applying in the styles....