Как отобразить данные API в консоль и чтобы не было перезагрузки страницы?

Делаю приложение погоды.
API которое будет отображать в приложении погоду по городу London взял из сайта https://openweathermap.org.

Когда в форме ввожу london и нажимаю кнопку, должны в консоли появиться данные о погоде но их нет, и страница перезагружаеться после нажатия кнопки. event.preventDefault написал но все равно страница перезагружаеться. Я думаю, то что нет данных в консоли, может быть связано как раз таки с перезагрузкой страницы, но не уверен.

Код файла App.js:

import React from "react";              	
import Info from "./components/info";  
import Form from "./components/form";  	
import Weather from "./components/weather";  	
	
const API_KEY ="89fdfjkd83434jfdfd438823fd";	
	
class App extends React.Component {    
    
		
gettingWeather = async (event) => {	
    event.preventDefault();
    const api_url = await fetch(`https://samples.openweathermap.org/data/2.5/weather?q=London&appid=${API_KEY}`);	
    const data = await api_url.json();	
    console.log(data);
}

 render (){                              
     return (                            	
             <div>	
                <Info />	
                <Form wetherMethod={this.gettingWether} />	
                <Weather />
           </div>	
	);	
  }	
}	
export default App;

В чем проблема?