title: Callback function for ref not working while using forwardRef for class components
body: <p>I was trying to pass a callback function to the ref object of a component which uses forward ref to pass to a class component. I have noticed that the callback function is only triggered once, so I am not able to get the changes in the Element.</p>
  <p>I am not sure what the issue is could you please help me with this.</p>
  <p><strong>The component to which I am passing the ref</strong></p>
  <pre><code>class ElemComponent extends Component {
    constructor(props) {
      super(props);
      this.state = {
        value: '',
      };
      this.ElemComponentRef = props.forwardRef || React.createRef();
    }
    render() {
      return (
        &lt;div ref={this.ElemComponentRef}&gt;
          Div has a ref
        &lt;/div&gt;
      )
    }
  }
  
  export default React.forwardRef((props, ref) =&gt; &lt;ElemComponent 
    forwardRef={ref} {...props}
  /&gt;);
  </code></pre>
  <p><strong>My parent component</strong></p>
  <pre><code>const App = () =&gt; {
      const [value, setValue] = React.useState(&quot;&quot;);
      return (
        &lt;&gt;
          &lt;button
            onClick={() =&gt; {
              setValue(&quot;white&quot; + value);
            }}
          &gt;
            Click
          &lt;/button&gt;
          &lt;MyForwardElement
            value={value}
            ref={() =&gt; console.log(&quot;this is the ref&quot;)}
          /&gt;
        &lt;/&gt;
      );
    };
  </code></pre>
  <pre><code>    this.ElemComponentRef = props.forwardRef || React.createRef();
  </code></pre>
  <p>Removing the above code to</p>
  <pre><code>      &lt;div ref={this.props.forwardRef}&gt;
  </code></pre>
  <p>is solving my issue but I need the ref object even if it is not passed</p>
  <p>I can't really updated the child component to a functional component right now, if there is any fix/explanation for this it would be really helpful.</p>
  <p>Thank you</p>