React <InvisibleRef /> component to avoid "Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()"

InvisibleRef.js

import React from 'react'

/**
 * Renders "invisible" div to use as a first element in Material UI Menu, and other popup components who obtain
 * a DOM ref from the child component. This allows to avoid: "Warning: Function components cannot be given refs.
 * Attempts to access this ref will fail. Did you mean to use React.forwardRef()"
 * @class InvisibleRef
 */
const InvisibleRef = React.forwardRef((props, ref) => {
  const styleInvisible = {
    height: 0,
    padding: 0,
    margin: 0,
  }
  return <div ref={ref} style={styleInvisible} {...props} />
})

export default InvisibleRef