React js - ternary adding html block to component - classNames break the block

Question

My goal is to build comment section that appears and disappears on a toggle click button.

I have the following structure:

set Button state:

    const [showButton, toggleShowButton] = useState(false)

Button:

<button className="comment-button" onClick={() => toggleShowButton(!showButton)}>{showButton ? "Hide comments" : "Show comments"}</button>

Conditional html block:

                {showButton &&
                    (
                        <div className="article-comment-section">
                            {article.comments && article.comments.map(x =>
                                <CommentCard key={x._id} {...x} />
                            )}

                            {isAuthenticated && <AddComment onCommentSubmit={onCommentSubmit} />}
                        </div>
                    )}

The block should appear and disappear on a button click, but it doesn't

I tried to put and an invalid classNames, and then my button works. But I still want to have my styling on.

Apparently the problem comes from the classNames.

How should I apply them so they work?