the inline function onclick works different from the outside function

In your example, you are calling function as soon as the component is loaded by writing it as handleClick(), so the browser does not wait for you to click as it should be.

handleClick =()=> {
    console.log('The link was clicked.');
}

return(
    <>
        <SettingsButton src="./img/leaf.png" alt="" onClick={handleClick}/>
    </>
);