ReactJs why do i get two console logs in a simple component?

i have this simple nav component, but it drives me crazy because it makes every console log i make in the app two times.
Im new to React btw.

export const NavBar = () => {
const [showNav, setShowNav] = useState(false);
const handleNavClick = () => {
setShowNav(!showNav);
};
console.log("hi");
return (
<>
<nav className="flex items-center justify-between pl-8 pr-16 fixed w-full border h-20 top-0 bg-white/30 backdrop-blur-sm z-10">
{/* Logo */}
<img
src="https://res.cloudinary.com/dv8nczwtj/image/upload/v1684896617/Logo_jivlnb.png"
alt="Logo"
className="logo"
/>
{/* Nav WEB*/}
<div className="md:flex flex-row space-x-5 hidden">
<a href="#" className="brand">
Apple
</a>
<a href="#" className="brand">
Samsung
</a>
<a href="#" className="brand">
Xiaomi
</a>
<a href="#" className="brand">
Google
</a>
</div>
{/* BTN Nav Mobil */}
<button className="md:hidden" onClick={handleNavClick}>
<img
src="https://res.cloudinary.com/dv8nczwtj/image/upload/v1684859901/menu_wh8ccz.png"
alt="Menu"
className="w-6"
/>
</button>
{/* Cart */}
<CartWidget />
</nav>
{/* Nav Mobil */}
{showNav && (
<div
className="flex fixed w-full flex-col justify-center items-center space-y-4 pb-2 border-b-2 border-black md:hidden bg-white/30 top-20 pt-4 backdrop-blur-sm"
style={{ animation: "fadeIn .5s linear" }}
>
<a href="#" className="brand">
Apple
</a>
<a href="#" className="brand">
Samsung
</a>
<a href="#" className="brand">
Xiaomi
</a>
<a href="#" className="brand">
Google
</a>
</div>
)}
</>
);
};

double console.log

I have tried putting the handleClick function in a useEffect but then when i put it on the onClick it says that the function is never declared

Is your app using React.StrictMode (https://react.dev/reference/react/StrictMode#fixing-bugs-found-by-double-rendering-in-development) ?