State rendering differently on page and in console - reactjs

Question

Having a state-nightmare that has had me stumped all week. Hope you can help.
I'm making a web app for gym-goers to record and track their progress on various different exercises. The exercises get stored in the user object, in a nested object, and then themselves have a nested object called history which the date and weight of their attempts, so an entry in users.exercises might look like:
{
exercise: "exercise 1",
target: "10",
history: [
{ date: 1, weight: 5 },
{ date: 2, weight: 6 },
{ date: 3, weight: 6 },
],
};
I then have a component which renders the specific exericse, called Exercise.js. At the moment, all it renders is the history.length:
<h1>History array length: {exerciseProp.history.length}</h1>
I also have a button which logs to the console that same property:
<button onClick={() => console.log(exerciseProp.history.length)}>
log
</button>
Initially, they give the same number. So far so good.
There's then a child component which allows users to add another entry to the history property. That is successfully updating the entry in MongoDB, but it isn't changing the number being rendered on the page. It is, however, changing the number that gets logged when I press the button. So the page will render, for example, "5", but when I press the button it logs "6". But I can't for the life of me work out why!
One thing I tried was this - I wondered if the problem was that it was getting the users array, using const users = useSelector((state) => state.auth); first and then not updating it when a child component updated state. So I've passed a handleUpdate prop down to the child component that then, as well as the component updating state, it updates the exerciseProp value with a newEntry:
const handleUpdate = (formData) => {
formData._id = "tempID";
let newEntry = exerciseProp;
newEntry.history = [...newEntry.history, formData];
setExerciseProp(newEntry);
};
I'd of course rather not have to do that and have it just refresh and update the users prop when the state changed, but I couldn't make that work.
I've tried to strip out all the irrelevant bits of code, but here's the component at the moment:
import React, { useState, useEffect } from "react";
import { ExerciseFooter } from "./ExerciseFooter";
import { useLocation } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import { getUsers } from "../actions/auth";
export const Exercise = (props) => {
const location = useLocation();
const dispatch = useDispatch();
//get full list of users
useEffect(() => {
dispatch(getUsers());
}, []);
const users = useSelector((state) => state.auth);
//get local user
const localUser = JSON.parse(localStorage.getItem("profile"));
//initialise user and specific exercise variables
const [user, setUser] = useState("");
const [exerciseProp, setExerciseProp] = useState({
history: [""],
target: 0,
});
//set user and exercise to match params/local storage
useEffect(() => {
localUser &&
localUser?.result &&
users.length > 0 &&
setUser(
users.filter(
(filteredUser) => filteredUser._id == props.match.params.userId
)[0]
);
if (!localUser) setUser("");
setExerciseProp(
user?.exercises?.filter(
(exercise) => exercise._id == props.match.params.exerciseId
)[0]
);
}, [users]);
//force update to state
const handleUpdate = (formData) => {
formData._id = "tempID";
let newEntry = exerciseProp;
newEntry.history = [...newEntry.history, formData];
console.log("new Ent", newEntry);
setExerciseProp(newEntry);
};
if (exerciseProp) {
return (
<div style={{ marginTop: "150px" }}>
<h1>History array length: {exerciseProp.history.length}</h1>
<button onClick={() => console.log(exerciseProp.history.length)}>
log
</button>
{exerciseProp && (
<ExerciseFooter
user={user}
exercise={exerciseProp}
handleUpdate={(formData) => handleUpdate(formData)}
/>
)}
</div>
);
} else {
return <>Loading...</>;
}
};
So the main problem is: the state on the page isn't changing when I expect it to, and the secondary one - though I think my workaround for it might be okay - was that the state wasn't changing in the parent component when the child dispatched a change to it.
Any help very much welcome!