React Event Handler in Graph Toolkit Custom Template Not Working

Question

We're templating the flyout in the Microsoft Graph Toolkit login component and click handlers on our own elements (inside the custom template) are not working. We're using a functional component, not a class. Any idea what we're doing wrong? Some of the HTML elements we have are omitted because they aren't relevant for this post. Here's our code:

  const CustomLoginTemplate = (props: MgtTemplateProps) => {
    const { handleSignOut } = props.dataContext;

    return (
      <div>
          <div className={signOutStyle} tabIndex={0} onClick={handleSignOut}>Sign Out</div>
      </div>
    )
  }

<Login>
   <CustomLoginTemplate template="flyout-commands"></CustomLoginTemplate>
</Login>

Note: there are two other similar questions here on SO but neither one actually addresses the exact issue we are having here.