Building like component - onClick function giving error

1

onClick function is giving below error
Type ‘{ color: string; size: number; onClick: () => void; }’ is not assignable to type ‘IntrinsicAttributes & IconBaseProps’.
Property ‘onClick’ does not exist on type ‘IntrinsicAttributes & IconBaseProps’.ts(2322)
(property) onClick: () => void



import { useState } from "react";
import { AiFillHeart } from "react-icons/ai";
import { AiOutlineHeart } from "react-icons/ai";

const Like = () => {
  const [status, setStatus] = useState(true);

  if (status)
    return (
      <AiFillHeart color="#ff6b81" size={60} onClick={() => setStatus(false)} />
    );
  return <AiOutlineHeart size={60} onClick={() => setStatus(true)} />;
};

export default Like;
2

Have a look at this thread, it describes the same problem.

According to the official github of react icons, you should instead use the onClick property of the parent. You can for example wrap it into a button:

 return (
    <button className={styles.containerButton} onClick={handleClick}>
      {liked && <AiFillHeart color="#ff6b81" size="20" />}
      {!liked && <AiOutlineHeart color="#ff6b81" size="20" />}
    </button>
  );

And it the CSS, do:

.containerButton {
    border: none;
    background-color: transparent;
}