Warning: Received "true" for non-boolean attribute active

Question

How can I resolve this warning?

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

From this error, I understood not to pass anything other than the standard attributes. However, I was able to solve the error by changing the argument type from boolean to number. Why does it work with the number type?

import { Link } from "react-router-dom";

...
<NavigationArea active={true} to="/nikkei">
...

const NavigationArea = styled(Link)<{ active: boolean }>`
  width: 50%;
  text-align: center;
  padding: 8px;
  font-weight: bold;
  color: ${(props) => (props.active ? "#22AFFF" : "#808080")};
`;

Answer 1

You can use string type in props value below is the code

active="true"