Hello every one I met an error message when trying to lunch the render on my localHost:

here is my code:

"use client";
import { useState } from "react";

const NavButton = () => {
    let [clickNav, setClickNav] = useState(false);
    const clickedOrNot = () => {
        setClickNav(!clickNav);
    }

    
    return <div className="navButton" onClick={clickedOrNot()}>
                { clickNav === false ?
                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368">
                        <path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/>
                    </svg>
                    :
                    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368">
                        <path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/>
                    </svg>
                }
            </div>
}

export default NavButton;

I am trying to change on the user click the svg of my nav bar to switch on click between a menu Icon and a cross Icon. The menu Icon when clicked open the nav bar and switch to a cross (to close the navbar when clicked) and the opposite

And... apparently Next encounter a rendering problem and signal the possibility of an infinity loop but I don't know why...

⨯ Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
at clickedOrNot (./components/NavButton.js:14:9)
at NavButton (./components/NavButton.js:18:18)
digest: "60856267"
GET / 500 in 206ms

Do you have any idea ?

Thanks in advance for your support 🙏