State clone getting updated prematurely

I've got a very simple program that I've written to highlight an issue I'm faced with. I've currently got an array of objects where each object simply has a sequence number. On a button click, the first object will have its sequence number updated to increase by one.

In my program, I've got a couple of console logs to highlight my issue. First, I've initialised state to include the array of objects. I've then created a clone of that state, so that I can modify it, then setting the state back with the cloned (modified) object.

My program is as follows:App.tsx

import {useState} from 'react';function reorder(questionData: Array<any>, count: number) {  let finalQuestions = JSON.parse(JSON.stringify(questionData))  console.log("finalQuestions before changes: ", finalQuestions)  finalQuestions[0]['sequence'] = count  return finalQuestions}function App() {  const [questions, setQuestions] = useState([    {      sequence: 1    },    {      sequence: 2    },    {      sequence: 3    }  ])  const [count, setCount] = useState(4)  function change(questions: Array<any>, count: number) {    console.log("questions before changes: ", questions)    const finalQuestions = reorder(questions, count)    setQuestions(finalQuestions)    setCount(count+1)    console.log("finalQuestions after changes: ", finalQuestions)  }  return (<div><button onClick={() => change(questions, count)}>Click</button><h1>Hello World</h1></div>  )}export default App

The issue I've got is that finalQuestions in the reorder function contains the updated values when I console log using console.log("finalQuestions before changes: ", finalQuestions). At this point, I'm expecting that this array of objects will be exactly like the original array of objects in console.log("questionData before changes: ", questionData) because I have not modified it. However, that is not the case.

To put it in hopefully easier terms, the following is the console logs after the first button click:

As you can see, questionData contains the original state but why is finalQuestions getting updated before finalQuestions[0]['sequence'] = count is even executed? I would only expect that to be the case in the 'after changes' console log, i.e. console.log("finalQuestions after changes: ", finalQuestions)

This may have something to do with React that I don't understand, but any help would be appreciated.

EDIT:Thank you all to the answers. I now understand that it's merely the console log that is displaying the reference rather than the actual value at the given time.

However, I've now modified my change function to output the original state after it is set with the cloned data, but it's showing as the un-modified data (opposite to my original issue, so to speak).

For example, this is the new method:

function change(questions: Array<any>, count: number) {    console.log("questions before changes: ", questions)    const finalQuestions = reorder(questions, count)    setQuestions(finalQuestions)    setCount(count+1)    console.log("questions after changes: ", questions)    console.log("finalQuestions after changes: ", finalQuestions)  }

The console.log("questions after changes: ", questions) displays the original data set, rather than the modified one, which is what I'd expect following setQuestions(finalQuestions) (see screenshot below). How can I console log the actual state at that moment in time?