Onclick event not changing this.state.value2 variable - reactjs

Question

when the weather details are displayed after search, clicking on the image is supposed to append the details and display the retVal in the handleClick event. For some reason this.setState for value2 is not even changing the variable and keeping it null.Ive tried converting to async thinking that maybe setState hadnt been finished by the time the page rendered but that didnt work either.
class Search extends React.Component {
constructor(props) {
super(props);
this.state = {
city: "",
temp: 0,
feels: "",
w_status: "",
description: "",
condition: "",
max: 0,
min: 0,
wind_speed: 0,
humidity: "",
pressure: 0,
sunrise: 0,
lastUpdate: "",
image: "",
value1: null,
value2: "Value 2 is currently null",
activate_err: false,
};
this.handleClick = this.handleClick.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleClick(e) {
console.log("handle click is being called");
const retval = (
<div>
<p>Maximum Temprature: {this.state.max}</p>
<p>Minimum Temprature: {this.state.min}</p>
<p>Humidity: {this.state.humidity}</p>
<p>Wind Speed: {this.state.wind_speed}</p>
<p>Pressure: {this.state.pressure}</p>
<p>Sunrise: {this.state.sunrise}</p>
</div>
);
if(this.state.value2 != null){
this.setState({ value2: null});
console.log("It is hidden");
}
else{
this.setState({ value2: retval});
console.log("It is shown");
}
}
async handleSubmit(e) {
const search = e.target.SearchVal.value;
console.log("You entered " + search);
console.log("Time to modify the entry!");
e.preventDefault();
//Converts any string with extra spaces to one space in between
console.log(search.replace(/\s{2,}/g, " ").trim());
const results = search
.replace(/\s{2,}/g, " ")
.trim()
.split(" ");
await fetch(
"https://api.openweathermap.org/data/2.5/weather?q=" +
results +
"&appid=" +
KEY
)
.then((response) => response.json())
.then((data) => {
console.log(data);
if (data["cod"] != 200) {
console.log(
"Error during search, activate err has been set to true!"
);
this.setState({ activate_err: true });
} else {
this.setState({
city: data["name"],
temp: data["main"]["temp"],
feels: data["main"]["feels_like"],
w_status: data["weather"][0]["main"],
description: data["weather"][0]["description"],
max: data["main"]["temp_max"],
min: data["main"]["temp_min"],
wind_speed: data["wind"]["speed"],
humidity: data["main"]["humidity"],
pressure: data["main"]["pressure"],
sunrise: data["sys"]["sunrise"],
image:
"http://openweathermap.org/img/wn/" +
data["weather"][0]["icon"] +
"#2x.png",
activate_err: true,
});
const retval = (
<div>
<hr />
<div className="weather-card">
<h3>City: {this.state.city}</h3> <img onClick={() => this.handleClick()} src={this.state.image} />
<h3>
Temprature: {this.state.temp} Feels Like: {this.state.feels}
</h3>
<p>{this.state.w_status}</p>
<p>{this.state.description}</p>
<div id="details" className="weather-details">
{this.state.value2}
</div>
</div>
<hr />
</div>
);
this.setState({ value1: retval });
}
})
.catch((err) => {
console.log(err);
});
if (this.state.activate_err == false) {
}
/*
let status = true;
let activate = false;
let i = 0;
while(status){
if(result[i] == ' ')
status = false;
if(activate){
}
}
status = true;
*/
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input
type="search"
placeholder="Enter a city, country or country code!"
name="SearchVal"
/>
<input type="submit" value="Search" />
</form>
<div id="search-results">{this.state.value1}</div>
</div>
);
}
}