state blank on first click - reactjs

Question

I am trying to do a next button which will find the next vehicle in an array and display it.
However I cannot figure out why when I click on the next button the first time my console.log(nextVin) shows blank. On the second click it shows fine.
What is my best way to resolve this?
Please see my code below:
import React, {useState} from "react";
import { useParams } from "react-router-dom";
import { Link } from 'react-router-dom';
import {Typography, Container, Paper, Button} from "#material-ui/core/";
import ArrowBackIosIcon from '#material-ui/icons/ArrowBackIos';
import ArrowForwardIosIcon from '#material-ui/icons/ArrowForwardIos';
const CarDetail = (props) => {
let {id} = useParams();
const [nextVin, setNextVin] = useState("");
const nextCar = () => {
const carIndex = props.cars.findIndex(car => car.vin===id)
props.cars.map((car, index) => {
if(index === carIndex +1){
setNextVin(car.vin);
}
})
console.log(nextVin);
}
return (
<div>
<div>
<Typography color="primary" variant ="h3">Car details</Typography>
{props.cars.map((car, index) => {
if(car.vin === id){
return(
<div key = {car.vin}>
<Container maxWidth="sm" >
<Paper elevation={3} spacing={14} >
<Typography color="primary" variant ="h5">Car model</Typography>
<span>{car.model_variant}</span>
<Typography color="primary" variant ="h5">Fuel type</Typography>
<span>{car.fuel_type}</span>
<Typography color="primary" variant ="h5">Engine Size</Typography>
<span>{car.engine_size}</span>
<Typography color="primary" variant ="h5">Body type</Typography>
<span>{car.body_type}</span>
<Typography color="primary" variant ="h5">Reg number</Typography>
<span>{car.regno}</span>
<Typography color="primary" variant ="h5">Doors</Typography>
<span>{car.doors}</span>
<Typography color="primary" variant ="h5">Transmission type</Typography>
<span>{car.transmission_type}</span>
<Typography color="primary" variant ="h5">VIN</Typography>
<span>{car.vin}</span>
</Paper>
</Container>
{index!==0 ? <Button><ArrowBackIosIcon/> Previous car</Button> : null}
<Link
to={`/joes-garage/`}>
<Button variant ="contained" color="primary">Return to car list</Button>
</Link>
{index !== props.cars.length-1 ?
<Button onClick={nextCar}>Next car <ArrowForwardIosIcon/></Button>
:null }
</div>
);
}else return false;
})}
</div>
</div>
);
};
export default CarDetail;

Answer 1

try this
const nextCar = (props) => {
let {id} = useParams();
const [nextVin, setNextVin] = useState("");
const [lock , setLock] = useState("true")
const carIndex = props.cars.findIndex(car => car.vin===id)
props.cars.map((car, index) => {
if(index === carIndex +1)
if(!lock){
setNextVin(car.vin);
}else{
//set blanck at first render
setNextVin('');
setLock(false);
}
})
console.log(nextVin);
}