I'm working trying to add an object created from data returned in an AXIOS request to state in a React Application.

The object itself appears to be fine and even prints out as expected without errors but when I go to add it to a hook, nothing happens regardless of what code I use. I've tried several combinations and approaches, most of them can be seen in this older post from a couple of years ago which seems to describe the same thing that I'm trying to do. nearly every post or bit of information I've found so far suggests doing something much like this but nothing has done the trick.

I've attached my code below showing the entire function and the hook in question.

    const [queryResultData, setQueryResultData] = useState([])

    function queryResultDataHandler(resultData){
        for(let i=0; i < resultData.length; i++){
            const data=resultData[i];
            let book={
                title: data.title,
                publisher: data.publisher,
                copyright: data.publishedDate
            }
            setQueryResultData([...queryResultData,book]);
        }
    }

I've also included a screenshot showing the contents of each object and the array of data after each attempt to add the data.

Any input on why this is happening would be greatly appreciated as I can't see what I'm doing wrong here.

New Update to issue

I've attached all of the relevant code below.

Primary Pane with problematic method.

All other hooks and functions included.

function AddBookAutomaticPane() {
    
    const [queryResultData, setQueryResultData] = useState([])
    const [selectedBookData, setSelectedBookData] = useState([])
    const [currentPane, setCurrentPane] = useState(
        <AddBookAutomaticSearch queryResultDataHandler={queryResultDataHandler} />)

    function switchPaneHandler(paneName){
        if (paneName === "search"){
            setCurrentPane(<AddBookAutomaticSearch queryResultDataHandler={queryResultDataHandler} switchPaneHandler={switchPaneHandler} />);
        } else if (paneName === "displayResults"){
            setCurrentPane(<AddBookAutomaticDisplayResults queryResultsData={queryResultData} setSelectedBookData={setSelectedBookData}/>);
        } else if (paneName === "previewAndfinalize"){
            setCurrentPane(<AddBookAutoPreviewAndFinalize selectedBookData={selectedBookData} />);
        }
    }

    function queryResultDataHandler(resultData){
        const bookData = resultData.map(({title,
               publisher,
               publishedDate
            }) => ({
                title,
                publisher,
                copyright: publishedDate
            }))
        setQueryResultData((oldQueryResultData)=>[...oldQueryResultData,...bookData]);

        switchPaneHandler("displayResults");
    }

    return (
        <div id="AddBookAutomatic">
            {currentPane}
        </div>
    );
}

export default AddBookAutomaticPane;

Pane being switched to.

There's nothing of note inside the component right now besides a header element to show when it's created.

function AddBookAutomaticDisplayResults(props){

    return (
        <section>
            <h1>Display Results</h1>
            {props.queryResultsData.map(() => (
                <BookDetailsPreviewPane />
            ))}
        </section>

    );
};

export default AddBookAutomaticDisplayResults;