Ref not being passed between wrapped parent and child components

Describe your context

dash                 2.9.3
dash-core-components 2.0.0
dash-html-components 2.0.0
dash-table           5.0.0

Describe the bug

Within custom components created using the dash-component-boilerplate, passing a Ref between a wrapped parent component and a wrapped child component does not work. An example setup looks like the below.

Tooltip.react.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import { ExternalTooltipComponent } from "@somelibrary";

export default class Tooltip extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        const {id, setProps, children, ...rest} = this.props;

        return (
            <ExternalTooltipComponent
                id={id}
                {...rest}
            >
                { children }
            </ExternalTooltipComponent>
        );
    }
}

IconButton.react.js

import React, { Component, forwardRef } from "react";
import PropTypes from "prop-types";
import { ExternalIconButtonComponent } from "@somelibrary";

class IconButtonComponent extends Component {
    constructor(props) {
        super(props);

        this.onClick = this.onClick.bind(this);
    }

    onClick() {
        this.props.setProps({ n_clicks: this.props.n_clicks + 1 });
    }
 
    render() {
        const {id, setProps, innerRef, ...rest} = this.props;

        return (
            <ExternalIconButtonComponent
                id={id}
                ref={innerRef}
                onClick={this.onClick}
                {...rest}
            />
        );
    }
}

const IconButton = forwardRef(function IconButton(props, ref) {
    return <IconButtonComponent innerRef={ref} {...props} />;
});
export default IconButton;

Expected behavior

The Ref is available within the child component.

Notes

This may not be the best way of using forwardRef, particularly in the context of Dash. If there is a better or cleaner way to do this, I'd love to hear about it

Inizia dagli esempi Tooltip.react.js e IconButton.react.js e dai punti di ingresso relativi al wrapper e alla gestione di ref di dash-component-boilerplate. Riproduci il caso annidato di parent/child con wrapper, traccia il punto in cui ref non è più disponibile e verifica che child possa accedere al ref previsto senza interrompere il comportamento delle props di Dash.