Javascript 我的NavLink活动类在REACTROUTERV6中出现问题

我已经使用Reaction-RoutV6创建了一个导航栏.当我们单击任何li元素时，将应用".active"类.现在我设置了"Active"类的样式(如添加BG-COLOR和COLOR)，但当我单击Home列表项时，我的徽标也被激活，因为我为徽标图像和Home列表项提供了相同的路径.

import React from "react";
import { NavLink } from "react-router-dom";
import "./Navbars.css";

function Navbars() {
  return (
    <div>
      <div>
        <ul className="navbar">
          <NavLink to="/">
            <img
              src="https://assets.ccbp.in/frontend/react-js/nxt-trendz-logo-img.png"
              alt="logo-image"
              className="logo-img"
            />
          </NavLink>
          <li>
            <NavLink to="/" className="navbar-link">
              Home
            </NavLink>
          </li>
          <li>
            <NavLink to="/carts" className="navbar-link">
              Carts
            </NavLink>
          </li>
          <li>
            <NavLink to="/products" className="navbar-link">
              Products
            </NavLink>
          </li>
          <li>
            <button type="button" className="btn btn-primary m-2">
              Logout
            </button>
          </li>
        </ul>
      </div>
    </div>
  );
}

export default Navbars;