Multiple dropdown in same React component is not working

Question

I have used two dropdown from mdbootstrap https://mdbootstrap.com/docs/jquery/components/dropdowns/

But both the dropdown has same dropdown items why so? In console -> source I am able to see different options but while displaying it is not shown why so? In below screenshots you can see dropdown items for both are same why is this happening? I am not able to debug this because in console -> source also it show shopping, travel etc but it is not displaying in dropdown why so?

code:

import React from "react";
import "./transaction.css";

const Transaction = () => {
  return (
    <div className="transactionContainer">
      <h5 class="card-header info-color white-text text-center py-4">
        <strong>Transaction Information</strong>
      </h5>
      <div class="card">
        <div class="card-body px-lg-5 pt-0">
          <form class="text-center" style={{ color: "#757575" }} action="#!">
            <div class="md-form">
              <input type="text" id="amount" class="form-control" />
              <label for="amount">Amount</label>
            </div>

            <button
              class="btn btn-primary dropdown-toggle mr-4"
              type="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              Payment Method
            </button>

            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">
                Cash
              </a>
              <a class="dropdown-item" href="#">
                Debit/Credit Card
              </a>
              <a class="dropdown-item" href="#">
                Net Banking
              </a>
            </div>

            <button
              class="btn btn-primary dropdown-toggle mr-4"
              type="button"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
            >
              Category
            </button>

            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">
                Shopping
              </a>
              <a class="dropdown-item" href="#">
                Travel
              </a>
              <a class="dropdown-item" href="#">
                Entertainment
              </a>
            </div>

            <button
              class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0"
              type="submit"
            >
              Add transaction
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default Transaction;

Screenshots:

Answer 1

Each dropdown needs to be wrapped inside a div with class of dropdown like this:

<div className="dropdown">
  <button
    class="btn btn-primary dropdown-toggle mr-4"
    type="button"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    Payment Method
  </button>

  <div id="menu1" class="dropdown-menu">
    <a class="dropdown-item" href="#">
      Cash
    </a>
    <a class="dropdown-item" href="#">
      Debit/Credit Card
    </a>
    <a class="dropdown-item" href="#">
      Net Banking
    </a>
  </div>
</div>