Updating an array of primitive values vs an array of objects with useState hook

Apologies for showing my ignorance here but this has been driving me nuts for the past couple of days.

I’m working on an application that changes the state of an array within a nested function. I have a second nested function that needs to use the updated value, but console logging shows that the old value is still being used. I can get around this by using useEffect. As an example, if the array is initialised as [0, 0, 0] and I call useState to mutate it to [1, 1, 1] and then console log it, it’ll print [0, 0, 0]. That’s fine, I get that the changes won’t be reflected within the function.

What I really don’t understand is if I do the same thing but with an array of objects, then the changes are reflected immediately. So if I initialise the array as [ { name: “Joe Blogs” } ], change it to [ { name: “Jane Blogs” } ] and then console log it, it will print “Jane Blogs”.

Can someone please explain why this is the case?

Here’s an example of what I mean

import "./App.css";
import { useState } from "react";

function App() {
  const [primValues, setPrimValues] = useState([0, 0, 0, 0]);
  const [objValues, setObjValues] = useState([{ language: "C#" }]);

  const updatePrimitiveArray = () => {
    const newValues = [...primValues];
    newValues[0]++;
    setPrimValues(newValues);
    console.log(primValues);
  };

  const updateObjectArray = () => {
    const newValues = [...objValues];
    newValues[0].language = "JS";
    setObjValues(newValues);
    console.log(objValues);
  };

  return (
    <div>
      <button onClick={updatePrimitiveArray}>Primitive Array</button>
      <button onClick={updateObjectArray}>Object Array</button>
    </div>
  );
}

export default App;

Thanks