React State update asynchronous issue - reactjs

Question

I have this component which creates row data for a table. It sets state. It also creates a button for one of the row states, which contains a reference to a function. I want the state to be available to that button. But it is one request behind. The state available in the showJourneyDetails function is always the previous state to the current state. I know react state is asynchronous so how do I make the current state available inside the showJourneyDetails function?
const [suspected, setSuspectedData] = useState([]);
const [suspectedReads, setSuspectedReads] = useState(false);
const findVehiclesOfInterestBetweenDateRange = () => {
fetch(`http://127.0.0.1:8000/vehicles`)
.then((response) => response.json())
.then((vehicles) => {
const suspectedDataReads = vehicles.map((row) => {
return {
journey_id: row.journey_id,
reads: row.reads,
};
});
setSuspectedReads(suspectedDataReads);
const suspected = vehicles.map((row) => {
return {
vrm: row.vrm,
start_time: row.start_time,
end_time: row.end_time,
journey_size: row.journey_size,
journey_time: row.journey_time,
score: row.score,
details: (<Button
variant="contained"
onClick={showJourneyDetails}
id={row.journey_id}
>
Details
</Button>),
};
});
setSuspectedData(suspected);
})
.catch((error) => {
console.log(error);
});
};
const showJourneyDetails = (event) => {
console.log(event.target.id);
console.log("showJourneyDetails suspectedDataReads:", suspectedDataReads);
}