我想只显示“添加到行李”按钮中的动画，但当我点击“添加到行李”按钮时，所有其他按钮s

也会显示动画，但我想只在点击的按钮上显示按钮动画。有人能帮助我吗？

<Table responsive>
          <thead>
            <tr>
              <th>
                <p
                  className="p-2"
                  style={{ backgroundColor: "#F5F0E5", fontSize: "20px" }}
                >
                  SM
                </p>
              </th>
              {attributelist.map((attribute) => (
                <th key={variation.Name}>
                  <p
                    className="ml=5 p-2"
                    style={{ backgroundColor: "#F5F0E5", fontSize: "20px" }}
                  >
                    {attribute.Name}
                  </p>
                </th>
              ))}
              <th>
                <p
                  className="ml=5 p-2"
                  style={{ backgroundColor: "#F5F0E5", fontSize: "20px" }}
                >
                  Price
                </p>
              </th>
              <th className="text-center" />
            </tr>
          </thead>
          {variation.map((variations) => (
            <tbody key={variations.ID}>
              <tr>
                <td className="text-dark">{variations.VariationSKU}</td>
                {variations.Attributes.map((attribute) => (
                  <td key={attribute.ID} className="text-dark">
                    {attribute.Value}
                  </td>
                ))}
                <td className="text-dark">
                  {`RM${variations.Price.toFixed(2)}`}
                </td>
                <td>
                  <Button
                    id="Sproduct-btn"
                    className={`btn add-to-cart w-100 ${
                      addedId === variations.ID ? submitResponse.class : ""
                    }`}
                    data-toggle="tooltip"
                    type="button"
                    tag={!user ? Link : "a"}
                    to={!user ? "/login" : ""}
                    disabled={
                      submitResponse.openState ||
                      Status === "Inactive" ||
                      variationStatus === "Inactive" ||
                      Stock === 0 ||
                      variationStock === 0
                    }
                    style={{ fontSize: "15px", width: "30%" }}
                    {...(user && {
                      onClick: () =>
                        onSubmit(
                          setAddedId(variations.ID),
                          setResponse(addToCart(productid, variations.ID))
                        ),
                    })}
                  >
                    <div className="cart">
                      <div>
                        <div />
                        <div />
                      </div>
                    </div>
                    <div className="dots" />
                    {/* {variationStock === 0 || data.data.Stock === 0 ? (
                <div className="pl-2 default">SOLD OUT</div>
              ) : (
                <span className="pl-2 default">ADD TO BAG</span>
              )} */}
                    <span className="pl-2 default">{result}</span>
                    <div className="success">ADDED</div>
                    <div className="failed">
                      FAILED TO ADDED, PLEASE TRY AGAIN
                    </div>
                  </Button>
                </td>
              </tr>
            </tbody>
          ))}
        </Table>

上面是我的按钮代码表

const [submitResponse, setSubmitResponse] = useState({
    class: "",
    openState: false,
  });
  const [response, setResponse] = useState();
  const [addedId, setAddedId] = useState();

  const onSubmit = () => {
    response
      .then(() => {
        // if success add to cart, process success animation
        setSubmitResponse({
          class: "added",
          openState: true,
        });
        setTimeout(() => {
          setSubmitResponse({
            class: "added txtState",
            openState: true,
          });
        }, 10);
        setTimeout(() => {
          setSubmitResponse({
            class: "added",
            openState: true,
          });
        }, 3000);
        // reset back to normal after 3.5s
        setTimeout(() => {
          setSubmitResponse({
            class: "",
            openState: false,
          });
        }, 3500);
      })

      .catch(() => {
        // if failed add to cart, process danger animation
        setSubmitResponse({
          class: "danger",
          openState: true,
        });
        setTimeout(() => {
          setSubmitResponse({
            class: "danger txtState",
            openState: true,
          });
        }, 10);
        setTimeout(() => {
          setSubmitResponse({
            class: "danger",
            openState: true,
          });
        }, 3000);

        // reset back to normal after 3.5s
        setTimeout(() => {
          setSubmitResponse({
            class: "",
            openState: false,
          });
        }, 3500);
      });
  };

上面是我的onSubmit，添加项目后的动画显示函数