Variable Console Logged Twice

I have recently learning react for front end development and have encountered the problem when using useStates. I tried to input a value in a textbox and submit it by clicking a submit button. Normally, only 1 response would be logged on the console, however it appeared twice.

Would be grateful if someone could spot where went wrong in my code snippet.
`

import './App.css';
import { Button } from 'react-bootstrap';
import { useState } from "react";
import axios from 'axios';

function App () {
  
  const [key, setKey] = useState(null);
  const [submit, setSubmit] = useState(false);

  function getKey(val){
    setKey({[val.target.name]: val.target.value})
  }

  {
    console.log(key)
    axios
    .post('https://jsonplaceholder.typicode.com/posts', key)
    .then(response => {
      console.log(response)
    })
  }

  return (
      <>
      <div className = "App">

        <h1>Type in the keyword you wish to search: </h1>
        <input 
          type = "text" 
          name = "keyword"
          onChange = {getKey}
          /> 
        <Button onClick = {() => setSubmit(true)} > Submit!</Button>
      </div>
      </>
  );
  
}

export default App;

`