Target container is not a DOM element - React and GatsbyJS - React-slick Component

Question

I am trying to use the React-Slick carousel component but having issues getting it to display in app and receiving this error...

Uncaught (in promise) Error: _registerComponent(...): Target container is not a DOM element.

featuresCarousel.js

import React from "react";
import ReactDOM from "react-dom";
import { render } from "react-dom";
import Slider from 'react-slick';


class featuresCarousel extends React.Component{
  render() {
    const settings = {
      autoplay: true
    }
    return (
      <div className='container'>
        <Slider {...settings}>
          <div>Test</div>
          <div>Test2</div>
          <div>Test3</div>
        </Slider>
      </div>
    );
  }
};

ReactDOM.render(
  <featuresCarousel />,
  document.getElementById('container')
);

should display in page section 3-section.js which is then displayed in the page.

import React from 'react'
import featuresCarousel from '../home/featuresCarousel'

const SectionThree = (props) => (
    <div>
        <featuresCarousel />
    </div>
)

export default SectionThree

Not sure if it will make a difference but I am also using GatsbyJSGatsbyJs and my knowledge of React is limited and very new.

Answer 1

Your component name featuresCarousel should be in UpperCase FeaturesCarousel

class FeaturesCarousel extends React.Component{
  render() {
    const settings = {
      autoplay: true
    }
    return (
      <div className='container'>
        <Slider {...settings}>
          <div>Test</div>
          <div>Test2</div>
          <div>Test3</div>
        </Slider>
      </div>
    );
  }
};

const SectionThree = (props) => (
    <div className="SectionThree">
        <FeaturesCarousel />
    </div>
)

export default SectionThree

ReactDOM.render(
  <SectionThree />,
  document.getElementById('root')
);

Working Demo