React refs forwarding to custom element issue

react-custom-element.js

import * as React from 'react'
import {Component} from 'react'

class App extends Component {
    setSvgRef(ref) {
        console.log('Parrent React got ref:', ref); // this works
    }

    render() {
        return <ScatterPlot svgRef={e => this.setSvgRef(e)}/>
    }
}

class ScatterPlot extends Component {
    render() {
        return (
            <div>
                <pre>A Table</pre>
                <svg ref={e => {
                    console.log('React run'); // this works
                    this.props.svgRef(e);
                }
                }/>
            </div>
        )
    }
}

export default App;


class CustomElement extends HTMLElement {
    connectedCallback() {
        const mountPoint = document.createElement('span');
        this.attachShadow({mode: 'open'}).appendChild(mountPoint);
        this.update();
    }

    setSvgRef(ref) {
        console.log('Custom element got ref -> ', ref) // PROBLEM: never reach to that point :(
    }

    update() {
        render(<ScatterPlot svgRef={e => {
            console.log('Custom Element run'); // PROBLEM: this does not run :(
            this.setSvgRef(e)
        }}/>, this.mountPoint);
    }

}

customElements.define('scatter-plot', CustomElement);