Snap.select is null in React.js but not in vanilla JavaScript

Question

I'm trying to get a script converted to React.js. This script is working without JS on a regular HTML page. However, when I try to use this in React, it's failing. Snap.select doesn't seem to work anymore.

In my regular example I'm just using the CDN links for the snapsvg libary. Can snapsvg-cjs be the issue maybe? I tried a few different snapsvg npm installs but this one was the best so far.

import React from 'react';
import ReactDOM from 'react-dom'
import 'bootstrap/dist/css/bootstrap.min.css';
import '../../style/App.scss';
import VideoPlayer from '../videoPlayer/VideoPlayer';
import $ from "jquery";
import {TweenMax,Power0, Power2, Power4} from "gsap";
import Snap from 'snapsvg-cjs';

export default class Wrapper extends React.Component {

render() {
    return <div className="container">
      <svg id="back">
        <radialGradient id="SVGID_1_" cx="0" cy="0" r="320.8304" gradientUnits="userSpaceOnUse">
          <stop  offset="0" className="stop1"/>
          <stop  offset="1" className="stop2"/>
        </radialGradient>
      </svg>
      <div id="card" className="weather">
        <svg id="inner">
          <defs>
            <path id="leaf" d="M41.9,56.3l0.1-2.5c0,0,4.6-1.2,5.6-2.2c1-1,3.6-13,12-15.6c9.7-3.1,19.9-2,26.1-2.1c2.7,0-10,23.9-20.5,25 c-7.5,0.8-17.2-5.1-17.2-5.1L41.9,56.3z"/>
          </defs>
          <g id="layer3"></g>
          <g id="cloud3" className="cloud"></g>
          <g id="layer2"></g>
          <g id="cloud2" className="cloud"></g>
          <g id="layer1"></g>
          <g id="cloud1" className="cloud"></g>
        </svg>
        <div className="videoArea">
            Video hierfr
        </div>
        <div className="details">
          <div className="temp">20<span>c</span></div>
          <div className="right">
            <div id="date">20 May 2050</div>
            <div id="summary"></div>
          </div>
        </div>
      </div>
      <svg id="outer"></svg>
    </div>;
  }
}

//  Fetch all DOM nodes in jQuery and Snap SVG
var currentWeather = "thunder";
var container = $('.container');
var card = $('#card');
var innerSVG = Snap('#inner');
var outerSVG = Snap('#outer');
var backSVG = Snap('#back');
var summary = $('#summary');
var date = $('#date');
var weatherContainer1 = Snap.select('#layer1');
var weatherContainer2 = Snap.select('#layer2');
var weatherContainer3 = Snap.select('#layer3');
var innerRainHolder1 = weatherContainer1.group();
var innerRainHolder2 = weatherContainer2.group();
var innerRainHolder3 = weatherContainer3.group();
var innerLeafHolder = weatherContainer1.group();
var innerLightningHolder = weatherContainer1.group();
var leafMask = outerSVG.rect();
var leaf = Snap.select('#leaf');
var outerLeafHolder = outerSVG.group();

var lightningTimeout;

// Set mask for leaf holder

outerLeafHolder.attr({
    'clip-path': leafMask
});

The error I'm getting is:

TypeError: Cannot read property 'group' of null

in line

var innerRainHolder1 = weatherContainer1.group();