react-datepicker css not being applied

Question

I'm using a Symfony-based react application and am trying to include a datepicker using the react-datepicker module.

I can create the datepicker object, but it does not appear to be styled correctly - when I click to select the date, there is just a vertical list of numbers that go to the top of the page (I've seen lots of people experience this online, often because they have not imported the datepicker css).

I am importing the react-datepicker.css file and if I inspect my datepicker object in the browser it says: class="react-datepicker-wrapper", so I presume that the import is working.

I am wondering whether I also need to do something else to another file within my application, perhaps to the webpack file, or maybe something else Symfony-related, but I'm a real novice with those things and am a bit stuck.

Your help would be much appreciated! Code below!

import DatePicker from "react-datepicker";
import "../../../node_modules/react-datepicker/dist/react-datepicker.css";


class MyWidget extends Component {
  constructor(props) {
    super(props);
    this.state = {
      startDate: new Date()
    }

  }

  handleCalendarClose() {
    console.log("Calendar closed")
  }

  handleCalendarOpen() {
    console.log("Calendar opened")
  }

  setStartDate(startDate) {
    this.setState({
      startDate: startDate
    });

  };


  render() {
    const { startDate } = this.state;

      return (
          <div>
            From: <DatePicker
              selected={startDate}
              onChange={startDate => this.setStartDate(startDate)}
              onCalendarClose={this.handleCalendarClose}
              onCalendarOpen={this.handleCalendarOpen}
            />
          </div>
      );
    }
  }
}

Answer 1

// import like this, it is working for me

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";