React Hooks にて setStateが反映されない。

React Hooksを用いて、チャットアプリを作成しようとしています。
まずはuseStateだけでApp.jsに最低限のことを書いて、後から分割していこうと思ったのですが
setState(下記で言うところのsetMessage)が反映されません。

テキストエリアに文字を書く。 => setContent発火
　　　　　　　↓
送信ボタンを押す => handleMessageSubmitが発火し、setMessageで各情報を入れていく。

ですが、このsetMessageに情報を入れてconsole.logでmessageを確認しても空の状態でしか返されません。
状態管理がそもそも理解できていない部分もあると思います。

以下コードです。

import React, { useState } from 'react';
import { Button, TextField, Box, Container } from '@material-ui/core';
import SendIcon from '@material-ui/icons/Send';
import "bootstrap/dist/css/bootstrap.min.css";
import './common.scss';

function App() {
  const [messages, setMessages] = useState([]);
  const [message, setMessage] = useState({})
  const [content, setContent] = useState('');

  const handleMessageSubmit = e => {
    e.preventDefault();
    setMessage({
      id: 1,
      user_id: 1, // 仮
      content: content,
      read: false, //仮
      current_user: true //仮
    });

    console.log(message);

    setContent('');
  }

  return (
    <Container>
      <div className='current-message-wrap'>
        <div className='message current-message'>
          <p>メッセージ</p>
        </div>
      </div>
      <div className='message other-message'>
        <p>メッセージ</p>
      </div>
      <Box display='flex' className='fixed-bottom'>
        <TextField
          label='コメント'
          variant='outlined'
          fullWidth
          style={{ marginRight: 1 }}
          value={ content }
          onChange={ e => setContent(e.target.value) }
        />
        <Button
          variant="contained"
          color="primary"
          onClick={ e => handleMessageSubmit(e) }
        >
          <SendIcon />
        </Button>
      </Box>
    </Container>
  );
}

export default App;