Collapse/expand targeted section bootstrap not working

Question

My goal is to toggle a specific section to expand or collapse a list of numbers. I am using Bootstrap for a toggle button to control this section, but it isn't working. I have been trying different methods but no luck.

Here is my button (ignore generic text):

  <button
                      class="btn btn-primary"
                      type="button"
                      data-toggle="collapse"
                      data-target="#averages"
                      aria-expanded="false"
                      aria-controls="averages"
                    >
                      Button with data-target
                    </button>

Here is the specific section I'm trying to target (it is not directly following the button):

<div className="collapse" id="averages">
                  <div className="card">
                    {info.grades.map(function (grade, index) {
                      return (
                        <div key={index}>
                          {" "}
                          Test {index}: {grade}
                        </div>
                      );
                    })}
                  </div>

How to get this to work properly?