Не срабатывает кнопка (в React). Консоль показывает, что extract вычисляется при нажатии кнопки, но в браузере не выводится. Подскажите пожалуйста

import React, {useState} from 'react';

const initNotes = [
    {
        id: 'GYi9G_uC4gBF1e2SixDvu',
        prop1: 'value11',
        prop2: 'value12',
        prop3: 'value13',
    },
    {
        id: 'IWSpfBPSV3SXgRF87uO74',
        prop1: 'value21',
        prop2: 'value22',
        prop3: 'value23',
    },
    {
        id: 'JAmjRlfQT8rLTm5tG2m1L',
        prop1: 'value31',
        prop2: 'value32',
        prop3: 'value33',
    },
];

function CustomButton({onPress}) {
    return <button type='button' onClick={onPress}>Click !</button>;
} 

function App() {
    let [notes, setNotes] = useState(initNotes);

    const id = 'JAmjRlfQT8rLTm5tG2m1L';
    const prop = 'prop2';

    let result = notes.map(function(note) {
        return <p key={note.id}>
            <span>{note.prop1} </span>
            <span>{note.prop2} </span>
            <span>{note.prop3}</span>
        </p>
    });

    function extracting() {
        let extract = notes.reduce((ext, note) => {
            if (note.id === id) {
                return note[prop];
            } else {
                return ext;
            }
        }, '(.)(.)');
        console.log(extract);
        return <span>{extract} !!!</span>;
    }

    return <div>
        <span>{result}</span>
        <CustomButton onPress={extracting} />
    </div>
}

export default App;