innerRef getting completely ignored - styled-components

Question

I am running into an off issue where my innerRef prop on a component is getting totally swallowed, and never ran.
Here is what my component implementation looks like:
<StyledPopOver
innerRef={el => (this.popOverEl = el)}
transitionState={transitionState}
animationTiming={animationTiming}
style={this.getAnchorPosition()}
{...styledProps}
>
{children}
</StyledPopOver>
And here is what the style component definition looks like:
const StyledPopOver = styled.div`
display: table-cell;
transform-origin: top;
transition-property: all;
position: fixed;
z-index: 9998;
opacity: 0;
transform: scaleY(0);
${props => {
switch (props.transitionState) {
case ENTERING:
return css`
opacity: 1;
transform: scaleY(1);
transition-duration: ${passedProps =>
passedProps.animationTiming.enter}ms;
`
case ENTERED:
return css`
opacity: 1;
transform: scaleY(1);
`
case EXITING:
return css`
transition-duration: ${passedProps =>
passedProps.animationTiming.exit}ms;
`
default:
return null
}
}};
`
If I log the props being passed into the styled component, I can see innerRef. But if I put a log in my ref setter, it never gets called.
The only thing additionally special about this is that the component is being rendered as a child of a React 16 Portal. That said, I just tested pulling the portal out of the tree, and I get the same result.

Answer 1

I figured this one out, and at the end of the day it is a lesson, so I figured I'd provide my solution.
It turns out that higher up in my tree, I was using "innerRef" in a way that was cascading down to children using {...styledProps}
What I learned is that innerRef should only ever be used as a prop name on a direct styled component. If not a direct styled component, it should only ever be ref (when interacting with a HTML element), or a name other than innerRef (when doing anything special about which element gets the ref handler.