Why isn't my React js button onMouseDown not working?

Question

<div className="commentinputMain">
                <img
                    className="commentinputPic"
                    src={PF + user.profilePic}
                    alt="Profile Pic"
                />
                <input
                    className="commentinputInputMain"
                    placeholder="Share something!"
                    onMouseDown={displayButtons}
                    onChange={(e) => {
                        setText(e.target.value);
                        setShowButtons(true);
                    }} />
            </div>
            <div className="commentinputMain">
                {showButtons && (
                    <>
                        <p>
                            <button onMouseDown={console.log("Wait WHAT??")}>Cancel</button>
                        </p>
                        <button>Post</button>
                    </>
                )}
            </div>
            <hr className="commentinputh1" />

Why is the Cancel on click not working? Please give me a solution. I am using React JS and am creating a blog website.


EDIT : It worked for me once I replaced the console log to this

onMouseDown={()=>console.log("Wait WHAT??")}

Was really silly question, sorry, it has a pretty straight-forward answer

Answer 1

you cant call console.log like that try like this let me know if this works

onMouseDown={()=>console.log("Wait WHAT??")}