Accessing [object Object] from MySQL in javascript react

In the below Picture I am getting [object Object] from my index.js express backend when '/api/getUsername' is called it should return the number 33 from a column called age in MySQL database that has a value of 33 int.

I return this in the front end via `res.send({ username: result }); however, I am unable to get to the value of the [object Object] and display the 33 value that it contains.

index.js

connection.connect((err) => {
  if (err) throw err;
});


const app = express();


app.use(express.static('dist'));

app.get('/api/getUsername', (req, res) => {
  connection.query('SELECT * FROM new_table WHERE age = ?', 33, (err, result) => {
    if (err) {
      console.log(err);
    }
    res.send({ username: result });
  });
});



app.listen(process.env.PORT || 8080, () => console.log(`Listening on port ${process.env.PORT || 8080}!`));

app.js

import React, { Component } from 'react';
import './app.css';
import ReactImage from './react.png';

export default class App extends Component {
  state = { username: null };

  componentDidMount() {
    fetch('/api/getUsername')
      .then(res => res.json())
      .then(user => this.setState({ username: user.username }));
  }

  render() {
    const { username } = this.state;
    return (
      <div>
        {username ? <h1>{`Hello ${ username}`}</h1> : <h1>Loading.. please wait!</h1>}
        <img src={ReactImage} alt="react" />
        <h1>hello</h1>
      </div>
    );
  }
}

Please let me know if there is any more info I can add.

Thank you Carl