index.js:1 Warning: Received `true` for a non-boolean attribute `active`

Question

Does someone can say me what caused this error and how to fix it? I already tried to change active keyword but still got same warning. Not sure if it's problem with Styled components or with just attributes. Down is the error and code.

Actual error

26 row - div under return, 27 - , ...

Codeblock

 return (
    <div>
  <div className="App">
    <div className="portfolio__labels">
      <a
        href="/#"
        active={filter === "all"}
        onClick={() => setFilter("all")}
      >
        All
      </a>
      <a
        href="/#"
        active={filter === "frontend"}
        onClick={() => setFilter("frontend")}
      >
        Frontend
      </a>
      <a
        href="/#"
        active={filter === "mobile"}
        onClick={() => setFilter("mobile")}
      >
        Mobile
      </a>
      <a
        href="/#"
        active={filter === "ux-ui"}
        onClick={() => setFilter("ux-ui")}
      >
        UX/UI
      </a>
      <a
        href="/#"
        active={filter === "others"}
        onClick={() => setFilter("others")}
      >
        Others
      </a>
    </div>
    <div className="portfolio__container">
      {projects.map((item, key) =>
        item.filtered === true ? (
          <ProfileCard
            key={key}
            name={item.name}
            title={item.title}
            image={item.image}
            className="border-box"
            exerpt={item.exerpt}
            git={item.git}
            url={item.url}
            category={item.category}
            click="Push"
            sans-serif
            mb0-l
            mb3
            flex-none
            w5
            mr3
          />
        ) : (
          ""
        )
      )}
    </div>
  </div>
</div>