AmplifySignOut button only works if async function exists

I am working on a simple React app that will use AWS Amplify to manage the user authentication. On a protected profile page (wrapped in withAuthenticator) the AmplifySignOut button only works if there exists an async function inside the Profile component. It doesn't even matter that it's not being called.

Here is my entry point file:

import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import awsconfig from 'src/aws-exports';
import Amplify from 'aws-amplify';

import Profile from './components/Profile';

Amplify.configure(awsconfig);

ReactDOM.hydrate(
  <Router>
    <Switch>
      <Route exact path="/bob">
        <Profile name="Bob" />
      </Route>
      <Route exact path="/susan">
        <Profile name="Susan" />
      </Route>
      <Route exact path="/mary">
        <Profile name="Mary" />
      </Route>
    </Switch>
  </Router>,
  document.getElementById('mountNode')
);

and here is my Profile component:

import React from 'react';
import Amplify from 'aws-amplify';
import awsconfig from '../aws-exports';
import { AmplifySignOut, withAuthenticator } from '@aws-amplify/ui-react';
import { Link } from 'react-router-dom';

Amplify.configure(awsconfig);

function Profile(props) {

  async function wtf() {}

  return (
    <div>
      Name: {props.name}
      <br />
      <Link to="/bob">Bob</Link>
      <Link to="/Susan">Susan</Link>
      <Link to="/Mary">Mary</Link>
      <br />
      <br />
      <AmplifySignOut />
      
    </div>
  );
}

export default withAuthenticator(Profile);

The code above works fine in that whenever I click the Sign Out button, it redirects me to the login modal. But if I remove the async keyword (on that function that isn't even being called), then when I click on the Sign Out button, nothing happens.

I really don't want to keep that async function in there without knowing why it needs to be there. Anyone have any ideas?