Bootstrap Reactstrap Collapse is not working with list of components

Having trouble figuring out why my list of components is not collapsing at all. I can't get them to change and feel I'm missing something tiny. I've tried both and tags but neither is working.

component

import React, { useState } from "react";
import { Card, CardText } from "reactstrap";

function Story(props) {
    console.log(props)
  return (
    <Card className="border m-1 shadow-sm vw-90 card-container" id={props.stories.id}>
      <h5>{props.stories.title}</h5>

//This is the part I'm trying to collapse------------------------->


      <div className="collapse" id={`${props.stories.id}_text`}>
        <CardText className="card-text-sm" aria-expanded="false">
          {props.stories.plot}
        </CardText>
      </div>


// ---------------------------------------------------------------->
        <button
          className="btn btn-sm btn-link"
          type="button"
          data-toggle="collapse"
          data-target={`#${props.stories.id}_text`}
          aria-expanded="false"
          aria-controls={`${props.stories.id}_text`}
        >
          + Show More
        </button>
      </div>
    </Card>
  );
}

export default Story;

my index.html has all the links for bootstrap

 <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
      integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
      crossorigin="anonymous"
    />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
      integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
      crossorigin="anonymous"
    ></script>
  </body>

and CSS


.card-container {
    padding: .4rem 1rem;
    line-height: 1.5;
    font-size: 1rem;
}

.collapse {
    display: block !important;
    height: 12rem;
    overflow: hidden;
}

.collapse.show {
    height: auto;
}

.collapsing {
    height: 3rem;
}

.footer a.collapsed::after {
    content: "+ Show More";
}

.footer a:not(.collapsed)::after {
    content: '- Show Less'
}

.card-text-sm {
    font-size: small;
}

What am I missing???

I've tried copying from this stack overflow solution:

Bootstrap 4: Display two lines followed by a Read More expandable link

and the getbootstrap.com official examples but it isn't working and I've spent way too much time on this as is.

Solution

I don't think you should be using jQuery and the original Bootstrap scripts. Reactstrap already handles these for you. You can see their example on the documentation. You can continue using the Bootstrap stylesheet, but I suggest to remove jQuery, bootstrap.min.js, and the popper scripts.

import "bootstrap/dist/css/bootstrap.min.css";
import { Card, CardText, Collapse, Button } from "reactstrap";

function Story(props) {
  const [isOpen, setIsOpen] = useState(false);
  const toggle = () => setIsOpen(!isOpen);

  return (
    <Card
      className="border m-1 shadow-sm vw-90 card-container"
      id={props.stories.id}
    >
      <h5>{props.stories.title}</h5>

      <Collapse isOpen={isOpen}>
        <CardText className="card-text-sm" aria-expanded="false">
          {props.stories.plot}
        </CardText>
      </Collapse>

      <Button type="button" onClick={toggle}>
        + Show More
      </Button>
    </Card>
  );
}