ToggleControl not applied on the save section - wordpress

Question

I'm currently building a custom Hero block. I've added a ToggleControl to hide or show content within this block. This does work on the edit section in gutenberg block, it also needs to add a class to the wrapper. This also works on the edit section.
The strange thing is, it does not work on the save section of the block. The code I use to set the class is the one below:
It does work like expected in the edit section
edit: function( props ) {
const { attributes, className } = props;
const wrapperStyle = {
backgroundColor: attributes.backgroundColor,
backgroundImage: attributes.backgroundImage && 'url(' + attributes.backgroundImage + ')',
};
const classes = classnames(
className,
dimRatioToClass( attributes.backgroundOpacity ),
{
'has-background-dim': attributes.backgroundOpacity !== 0,
},
attributes.position,
{ [ `align${ attributes.align }` ]: attributes.align && attributes.fullWidthBackground },
{ [ `has-${ attributes.includeContent ? 'content' : 'no-content' }` ] : attributes.includeContent },
);
return (
<Fragment>
<Inspector { ...props } />
<div style={ wrapperStyle } className={ classes }>
<div className="wrapper-inner">
<div className="wrapper-inner-blocks">
{ attributes.includeContent === true &&
<InnerBlocks />
}
</div>
</div>
</div>
</Fragment>
);
},
But on the save section the style is not applied and the conditional tag is not working. See the code below.
Am I missing something?
save: function( props ) {
const { attributes, className } = props;
const wrapperStyle = {
backgroundColor: attributes.backgroundColor,
backgroundImage: attributes.backgroundImage && 'url(' + attributes.backgroundImage + ')',
};
const classes = classnames(
className,
{ [ `has-${ attributes.includeContent ? 'content' : 'no-content' }` ] : attributes.includeContent },
{ [ `align${ attributes.align }` ]: attributes.align && attributes.fullWidthBackground },
dimRatioToClass( attributes.backgroundOpacity ),
{
'has-background-dim': attributes.backgroundOpacity !== 0,
},
attributes.position,
);
return (
<div style={ wrapperStyle } className={ classes }>
<div className="wrapper-inner">
<div className="wrapper-inner-blocks">
{ attributes.includeContent === true &&
<InnerBlocks.Content />
}
</div>
</div>
</div>
);
}
} );

Answer 1

I can not comment, so, I have to post this an answer instead :/
I'm guessing the attributes.includeContent prop is the ToggleControl is question, yes?
Is it set as a Boolean in the attributes?
What do you get when you console.log it in the save? What about when you console.log its type in save? I'm just wondering if it is ending up as a string which would eval to true.