Why the click handler is trigger twice for the first time?

Question

My code is as follows:

import React,{ useReducer } from 'react';
import { Button, Col, Container, Modal, Row } from 'react-bootstrap';
export default function Click(){
  let reducer = (state, action) => {
    let result = { ...state };
    switch (action.type) {
      case "addWorkLogEntry":
        console.log("addWorkLogEntry");
        break;
      default: break;
    }
    return result;
  }
  const [formItem, updateFormItem] = useReducer(reducer, { requestObj: {worklogs:[]}, selectedWorkLogId: [] });
  let addWorkLogEntry = (e) => {
    updateFormItem({type:"addWorkLogEntry"});   
  }
  return(
    <>
      <Button variant="dark" onClick={addWorkLogEntry}>Add New WorkLog</Button>
    </>
  )
}

When I click on the "Add New WorkLog" button for the first time, the browser console shows the word "addWorkLogEntry" twice.

After that, when I click on the "Add New WorkLog" button, the browser console shows the word "addWorkLogEntry" once only.

Would you tell me what is going on?

Here is my Stackblitz.