Почему событие onClick запускается дважды, хотя в React есть e.preventDefault, использующий хуки?

Обновление: проблема находится непосредственно в редюсере и не имеет ничего общего ни с функцией onClick, ни с функцией deleteLastItem. Я проверил это с помощью console.logs, и, по-видимому, дважды повторяется только тот, который находится непосредственно в редюсере.

Я тестировал хуки useReducer и useContext одновременно, потому что думал, что они могут очень хорошо работать вместе, но, видимо, когда я устанавливаю функцию в функцию onClick, она срабатывает дважды, и важно, что это не так, потому что я Я удаляю последний элемент из массива, поэтому он удаляет два элемента вместо одного.

Вот файл, в котором хранятся контекст и хуки редуктора:

import React, {createContext, useReducer} from "react";

const initialState = {
  books: [
    {name: "Book 8", autor: "Author 8", id: 8},
    {name: "Book 7", autor: "Author 7", id: 7},
    {name: "Book 6", autor: "Author 6", id: 6},
    {name: "Book 5", autor: "Author 5", id: 5},
    {name: "Book 4", autor: "Author 4", id: 4},
    {name: "Book 3", autor: "Author 3", id: 3}
  ]
}

const reducer = (state, action) => {
  switch (action.type) {
    case "DELETE":
      state.books.pop();
      console.log("hey");
      return {...state}
    default:
      return {...state}
  }
}

export const BookContext = createContext();

export const BookProvider = props => {
  const [state, dispatch] = useReducer(reducer, initialState);

  // Actions
  const deleteLastBook = () => dispatch({type: "DELETE"});

  return (
    <BookContext.Provider value={{books: state.books, deleteLastBook}}>
      {props.children}
    </BookContext.Provider>
  )
}

Как вы можете видеть, console.log("hey") говорит мне, что он выполняется дважды (кроме того, что элементы на экране стираются дважды за раз)

Вот компонент, в который вводится контекст и где возникает проблема:

import React, {useContext} from 'react';
import {BookContext} from "../context/BookContext";

const Books = () => {

  const information = useContext(BookContext);

  const {books, deleteLastBook} = information;

  const deleteBook = e => {
    e.preventDefault();
    deleteLastBook();
  };

  return (
    <div>
      {console.log(books)}
      {books.map(book => (<h1 key={book.id}>{book.name}</h1>))}
      <button onClick={deleteBook}>Delete book</button>
    </div>
  )
}

export default Books;

Ну и напоследок вот app.js, не думаю, что пригодится, но на всякий случай:

import React from 'react';
import './App.css';
import {BookProvider} from "./context/BookContext";
import Books from "./components/Books";

const App = () => {
  return (
    <BookProvider>
      <div className="App">
        <Books />
      </div>
    </BookProvider>
  );
}

export default App;