Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? #71
Description
when using with a simple function component as follow:
<ScrollableAnchor id={"faq"} >
<BlockTitle>
FAQ
</BlockTitle>
</ScrollableAnchor>
const BlockTitle = ({ children, ...props }) => {
const classes = useStyles()
return (
<Typography className={classes.title} variant="h2" {...props}>
{children}
</Typography>
)
}
React doesn't like it and report the following warning:
Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
If I use a plain <div> rather than a custom component it work though.
This is maybe linked to the clone element from the ScollableAnchor.