How to add multiple different events on single button in react js. But when onMouseDown function runs onClick should not work like below code

Question

function Demo() {
  function onClick() {
    console.log("I am from onClick")
  }

  function onMouseDown() {
    console.log("I am from onMouseDown")
  }

  function onMouseUp() {
    console.log("I am from onMouseUp")
  }
  return (<>
     <button onCLick={onClick} onMouseDown={onMouseDown} onMouseUp={onMouseUp}>Click Me</button>   </>
  )
}

When I mouse down it should give me "I am from onMouseUp" but should not give me "I am from onClick".

Also, when I mouseup it should give me "I am from onMouseDown".