I am new in React and face an issue.

I have several divs and when a div is clicked, I want to add a new class in this div only.

The issue is when I click on a class, it adds a new class in this div, but it also adds new classes in all other divs.

Please take a look at my code below and please give me a hand.

Thanks

export default function Toggle() {
  const [hoverToggle, setHoverToggle] = useState();
  const toggleIt = () => {
    setHoverToggle(!hoverToggle);
  };
return (
<>
      <div
        onClick={toggleIt}
        className={`${hoverToggle ? "getClick" : "noClick"}`}
      >
        This is DIV 1
      </div>
      <div
        onClick={toggleIt}
        className={`${hoverToggle ? "getClick" : "noClick"}`}
      >
        This is DIV 2 
      </div>
      <div
        onClick={toggleIt}
        className={`${hoverToggle ? "getClick" : "noClick"}`}
      >
        This is DIV 3
      </div>
</>
)