Why is the console.log() printing multiple times with all the previous values?

If you wish to see the value, you need to use a useEffect hook that will react to the number change. The value you could be outputting with your method might not be the right value

import React, { useEffect, useState } from "react";

export default function App() {
  let [number, setNumber] = useState(0);
  function plus() {
    setNumber((previousNumber) => previousNumber + 1);
  }

  useEffect(() => {
    console.log(number);
  }, [number]);

  return (
    <div className="App">
      <h1>{number}</h1>
      <button onClick={plus}>+</button>
    </div>
  );
}

You should also base your new value on the previous one

Codesandbox example

To answer your specific question: the reason this happens is because you tie an event listened to your document on every render, which happens each time you click the Plus button. So every keydown is calling your ptintNumber exactly as many time as you clicked the Plus button.

Solution: Put your even listener into useEffect like so:

import React from "react";
import "./styles.css";

export default function App() {
  let [number, setNumber] = React.useState(0);
  const number_ref = React.useRef();
  number_ref.current = number;

  function plus() {
    setNumber((number += 1));
  }

  function ptintNumber() {
    console.log(number_ref.current);
  }

  React.useEffect(() => {
    document.addEventListener("keydown", ptintNumber);
  }, []);

  return (
    <div className="App">
      <h1>{number}</h1>
      <button onClick={plus}>+</button>
    </div>
  );
}

Sandbox: https://codesandbox.io/s/wizardly-antonelli-vix6q?file=/src/App.js

You can use onKeyDown instead of addEventListener

function ButtonComp() {
    let [number, setNumber] = useState(0);
    // document.addEventListener("keydown", ptintNumber);

    return (
        <div>
            <h1>{number}</h1>
            <button onClick={() => setNumber(number+1)} onKeyDown={() => {console.log(number)}}>+</button>
        </div>
    );
}