Ref on svg <path /> doesn't have "getTotalLength()"-Method

I want to create a component which renders an SVG path element like so:

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

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

  refCallback(element) {
    console.log("Element: ", element, element.getTotalLength());
  }

  render() {
    const { data, id } = this.props

    return (
      <path d={ data } id={ id } ref={ this.refCallback } />
    );
  }
}

I expected to get the DOM Node of the path and then use the "getTotalLength()" method on it. But instead I get the following output in the console for the path element:

Element: <path d="M11.859375,0.88671875 C9.10229798,32.1448978 3.72401281,62.1847019 0.921875,92.3632812" id="Path"></path>

And for "element.getTotalLength()" this:

Uncaught TypeError: element.getTotalLength is not a function

I have no clue why it's behaving like this. I expected to get the DOM Element and use "getTotalLength()".

Does anyone know what I'm doing wrong?