When i click a calculator key, it sometimes randomly console.logs "undefined"

i have an issue which i find somewhat complicated to explain. So, i have calculator buttons, and on the numbers, when i click them, it logs there value to the console. The issue is, after constantly clicking multiple buttons, eventually it logs undifined, HOWEVER, after clicking anywhere else in the calculator (the display, other buttons or the background), and right after clicking elsewhere, that same button now gives me its value. This happens randomly, and doesnt seem logical. Hope i manage to explain myself. And once more thank you in advance. Here is a link to the current code https://calculator-app-topaz.vercel.app/

export default function CalculatorKeys(props) {
    const btnPressed = (e) =>{
        var target = e.target.value;
        console.log(target);
    };
    return(
        <div id = 'keysGridContainer'>
            <button className = 'gridItem gridKey1' value = '7' onClick = {btnPressed}><span>7</span></button>
            <button className = 'gridItem gridKey2' value = '8' onClick = {btnPressed}><span>8</span></button>
            <button className = 'gridItem gridKey3' value = '9' onClick = {btnPressed}><span>9</span></button>
            <button className = 'gridItem gridKey4'><span>DEL</span></button>

            <button className = 'gridItem gridKey5' value = '4' onClick = {btnPressed}><span>4</span></button>
            <button className = 'gridItem gridKey6' value = '5' onClick = {btnPressed}><span>5</span></button>
            <button className = 'gridItem gridKey7' value = '6' onClick = {btnPressed}><span>6</span></button>
            <button className = 'gridItem gridKey8'><span>+</span></button>

            <button className = 'gridItem gridKey9' value = '1' onClick = {btnPressed}><span>1</span></button>
            <button className = 'gridItem gridKey10' value = '2' onClick = {btnPressed}><span>2</span></button>
            <button className = 'gridItem gridKey11' value = '3' onClick = {btnPressed}><span>3</span></button>
            <button className = 'gridItem gridKey12'><span>-</span></button>

            <button className = 'gridItem gridKey13'><span>.</span></button>
            <button className = 'gridItem gridKey14' value = '0' onClick = {btnPressed}><span>0</span></button>
            <button className = 'gridItem gridKey15'><span>/</span></button>
            <button className = 'gridItem gridKey16'><span>x</span></button>

            <button className = 'gridItem gridKey17'><span>RESET</span></button>
            <button className = 'gridItem gridKey18'><span>=</span></button>
        </div>
    );
}