Call to Ethereum API to make transaction making two transactions

I’m trying to make a transaction from one wallet to another using the Ethereum API via the Metamask API – the code should send a request to make a transaction to the Ethereum API, then log the hash of the transaction in the log once the transaction is made. However, for some reason two transactions are made when this code is run, even though the function is only run once (as far as I can tell at least) – both transactions are logged and made successfully, but I can’t tell why two are made. If it’s relevant, this code is running on a website using ReactJS and NextJS.

Here is my code:
` // Makes a request to make an ethereum transaction when button with ID transfer is pressed
const transfer = document.querySelector(‘#transfer’)

  transfer.addEventListener('click', () => {
    ethereum
      // Calls ethereum API to make transaction
      .request({
        method: 'eth_sendTransaction',
        params: [
          {
            // Address of the wallets transaction is going from and to
            from: 'address',
            to: 'address',
            // Hex of transaction amount in wei
            value: 'value'
          },
        ],
      })
      // Logs the hash of the transaction in console
      .then((txHash) => console.log(txHash))
      .catch((error) => console.error)
  })`

And the corresponding HTML:

<>
    <button id='transfer'>transfer</button>
</>

I’ve tried rewriting the function to run directly instead of when a button is clicked, but two transactions were still made – this makes me think that the problem is with the API call and not the JS/HTML, but I’m not certain of that.
I also tried giving the code to ChatGPT, but it says that in theory only one transaction should be made.