React Spring and Styled Components - reactjs

Question

I'm new to React, trying to integrate some animations. I'm using Gatsby.js framework.
const LeadHeading = styled(animated.h1)`
font-weight: bold;
font-size: 3rem;
font-family: ${props => props.theme.fontSecondary};
margin-bottom: 0;
line-height: 2.5rem;
color: #FFF3D8;
const IndexPage = ({menuOpen}) => {
const h1Animation = useSpring({
opacity: menuOpen ? '0' : '1'
})
return (
<>
<Layout>
<Section className="hero is-fullheight">
<div className="hero-body container is-flex">
<LeadHeading
style={h1Animation}
>
some heading
</LeadHeading>
</div>
</Section>
</Layout>
</>
)
}
export default IndexPage
The menu status is managed in the "layout" component via the useState hook.
const [menuOpen, setMenuOpen] = useState(false)
Basically, I just want to fadeout the h1 when the menu pops up, since it doesn't look good due to the transparency of the menu.
Appreciate your help.

Answer 1

const LeadHeading = styled(animated.h1)`
font-weight: bold;
font-size: 3rem;
font-family: ${props => props.theme.fontSecondary};
margin-bottom: 0;
line-height: 2.5rem;
color: #FFF3D8;
`
const IndexPage = ({menuOpen}) => {
const h1Animation = useSpring({
opacity: menuOpen ? '0' : '1'
})
return (
<>
<Layout>
<Section className="hero is-fullheight">
<div className="hero-body container is-flex">
<LeadHeading
style={h1Animation}
>
some heading....
</LeadHeading>
</div>
</Section>
</Layout>
</>
)
}
export default IndexPage
EDIT// The menu status is managed in the "layout" component via useState hook.
But it should be possible, to pass the data to "IndexPage" right?
Ok I thought I can skip the animated part in the render method, since I use it above in the styled component variable. (sry I forgot to mention that in my previous post).
Your approach was one of my first approaches but it didnt work.