Materialize Carousel (jQuery) on Meteor/React Not Working

I don’t know what I’m doing wrong, but though the images load the vertical calculations are not executed, and none of the eventHandlers or effects. Where is domReady supposed to go, or how best do you run that jQuery carousel object only once? Here’s what my code looks like:

import React from 'react';
import classNames from 'classnames';
import { createContainer } from 'meteor/react-meteor-data';
import { Stories } from '../../api/Collections.js';

class Home extends React.Component {
  // The component is updated */
  componentDidMount(prevProps, prevState) {
    $( document ).ready(function(){
      // Homepage
      $('.carousel.carousel-slider').carousel({full_width: true});
  // update
    // Here we go
    if( !this.props.isReady ){
    // if
    } else {

      // Add the featured
      var featured = [];

      // Loop through carousel items
      for(i=0;i<2;i=i+1) featured.push(<a className="carousel-item" href="#" key={i}><img src=""/></a>);

      // Send it home
      return (
        <div className="carousel carousel-slider">
          <a className="carousel-item" href="#one!"><img src=""/></a>
          <a className="carousel-item" href="#two!"><img src=""/></a>
          <a className="carousel-item" href="#three!"><img src=""/></a>
          <a className="carousel-item" href="#four!"><img src=""/></a>


export default HomeController = createContainer(() => {
  var handle = Meteor.subscribe('stories');
  return {
    isReady: handle.ready(),
    featured: Stories.find().fetch(),
    stories: Stories.find().fetch()
}, Home);

//export default Home;

Declare the carousal property inside onRendered function instead of document ready.