css prop returns [object, object]

[najandz]

Thanks for the wonderful solution, I've created a Grid component and would like to change the direction of flex based on breakpoint but I am getting value as [object, object]

<div **direction="[object Object]"** class="Grid-sc-9kgu6b-0 vwGqw" size="100" wrap="nowrap">

const flexDirection = ({ direction }) => map(direction, val => (console.log(val), flex-direction: ${val};));
const Grid = styled.div
${width};
display: flex;
align-items: ${props => props.alignItems};
align-content: ${props => props.alignContent};
&&& {
${flexDirection};
}
flex-wrap: ${props => props.wrap};
justify-content: ${props => props.justifyContent};

&.debug * {
	outline: 1px solid red;
}

;
<Grid direction={{ mobile: "column-reverse", tablet: "row", desktop: "row" }}>