Changing a styled-component style based on state at the top of app - reactjs

Question

So I have a simple navbar that when hits a certain media query it turns into a hamburger, and when I click on hamburger-icon, I want the new navbar element slide over. Here is how I have it setup.
Layout Component
const Layout = ({ children }) => {
const [isOpen, setIsOpen] = React.useState(false);
const toggleSidebar = () => {
setIsOpen(!isOpen)
}
return (
<>
<Navbar toggleSidebar={toggleSidebar} />
<Sidebar isOpen={isOpen} toggleSidebar={toggleSidebar}/>
{children}
<Footer />
</>
)
}
Sidebar Component
const SidebarAside = styled.aside`
background: ${props => props.theme.grey10};
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
display: grid;
place-items: center;
opacity: 0;
transition: ${props => props.theme.transition};
transform: translateX(-100%);
${props =>
props.showsidebar && css`
opacity: 1;
tranform: translateX(0);
`
}
`
const CloseButton = styled.button`
position: absolute;
right: 4.75%;
top: 2.75%;
font-size: 2.5rem;
background: transparent;
border-color: transparent;
color: ${props => props.theme.redDark};
cursor: pointer;
`
const Sidebar = ({isOpen, toggleSidebar,}) => {
return (
<SidebarAside showsidebar={isOpen}>
<CloseButton onClick={toggleSidebar}>
<FaTimes />
</CloseButton>
</SidebarAside>
)
}
First time using styled-components, and not totally sure what my angle for this should be.

Answer 1

Ultimately I figured it out, with just changing the syntax in the styled component to...
Sidebar Styled Component
opacity: ${props => props.showsidebar ? '1' : '0'};
transform: ${props => props.showsidebar ? 'translateX(0)' : 'translateX(-100%)'};
`
const Sidebar = ({isOpen, toggleSidebar,}) => {
return (
<SidebarAside showsidebar={isOpen}>
<CloseButton onClick={toggleSidebar}>
<FaTimes />
</CloseButton>
</SideBarAside>