无法让这个引导轮播工作

Question

This bootstrap carousel refuses to change slides whether it's with the indicators or with the arrows, my other carousel works fine, I have imported all bootstrap and javascript cdn's and am stuck as to why it doesn't work. but when I go back to my other carousel built with bootstrap everything works fine

     <script
          src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
          integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
          crossorigin="anonymous"
        ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
      integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
      crossorigin="anonymous"
    ></script>

import React from 'react'
import { Slides } from './Slides';
import {
  faArrowCircleRight,
  faArrowCircleLeft,faDiamond
} from '@fortawesome/pro-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

export const Index = () => {
    return (
      <div
        id="carouselExampleIndicators "
        className="carousel slide rooms-carousel"
        data-ride="carousel"
      >
        <ol className="carousel-indicators">
          
          <FontAwesomeIcon
            data-target="#carouselExampleIndicators"
            data-slide-to="0"
            className="active indicators"
            icon={faDiamond}
            color="#f4efe8"
          />
          <FontAwesomeIcon
            data-target="#carouselExampleIndicators"
            data-slide-to="1"
            className=" indicators"
            icon={faDiamond}
            color="#f4efe8"
          />
          <FontAwesomeIcon
            data-target="#carouselExampleIndicators"
            data-slide-to="2"
            className=" indicators"
            icon={faDiamond}
            color="#f4efe8"
          />
        </ol>
        <div className="carousel-inner">
          <Slides />
        </div>
        <a
          className="carousel-control-prev"
          href="#carouselExampleIndicators"
          role="button"
          data-slide="prev"
        >
          <FontAwesomeIcon
            className="carousel-control-prev-icon"
            aria-hidden="true"
            className="text-center"
            icon={faArrowCircleLeft}
            size="2x"
            color="#f4efe8"
          />
          <span className="sr-only">Previous</span>
        </a>
        <a
          className="carousel-control-next"
          href="#carouselExampleIndicators"
          role="button"
          data-slide="next"
        >
          <FontAwesomeIcon
            className="carousel-control-next-icon"
            aria-hidden="true"
            className="text-center"
            icon={faArrowCircleRight}
            color="#f4efe8"
            size="2x"
          />

          <span className="sr-only">Next</span>
        </a>
      </div>
    );
}

Answer 1

You have a space at the end of the id for your primary div.