Passing Username and UserID Parameter to WebChat using WebChat Hooks API

I used to be able to pass the Username and UserID parameter from the URI using the below code on Webchat:

    var queryString = window.location.search;
    var urlParams = new URLSearchParams(queryString);
    var user = urlParams.get('userid')
    var usern = urlParams.get('username')

and I pass it on to the Webchat using the below code:

    window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ token: }),
        store,
        userID: user,
        username: usern,
        styleOptions
    }, document.getElementById('webchat'));
    document.querySelector('#webchat > *').focus();

Now this works perfectly before when I was using the usual Webchat for the Botframework. Its no longer working when I started using ReachJS on the Webchat. How do I pass this parameter using the Webchat Hooks API? I tried specifying it using the below code but does not work.

ReactDOM.render(
      <Composer directLine={window.WebChat.createDirectLine({ token: })}>
        <BasicWebChat />
        <SendMessageOnConnect />
        <user />
        <usern />
      </Composer>,
      document.getElementById('webchat')
    );

This works in my React project. Your implementation is different, but this should put you in the right direction. You can see in the listed activity that the user name is updated to 'Steve'. In my case, id is not updated because I am generating an id with the token. When an id is generated via Direct Line with the token, it takes precedence over any id's passed via Web Chat.

import React from 'react';
import ReactWebChat, { createDirectLine } from 'botframework-webchat';

export default class WebChatView extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      user: '',
      usern: ''
    };
  }

  componentDidMount() {
    var queryString = window.location.search;
    var urlParams = new URLSearchParams(queryString);
    var user = urlParams.get('userid');
    var usern = urlParams.get('username');
    this.setState({ user: user, usern: usern })
    this.fetchToken();
  }
  
  async fetchToken() {
    const res = await fetch('http://localhost:3500/directline/token', { method: 'POST' });
    const { token } = await res.json();

    this.setState(() => ({
      directLine: createDirectLine({ token: token })
    }));
  }

  render() {
    return (
      this.state.directLine ?
        <ReactWebChat
          directLine={this.state.directLine}
          userID={this.state.user}
          username={this.state.usern}
        />
        :
        <div>Connecting to bot&hellip;</div>
    )
  }
}

Activity output:

{
  type: 'message',
  id: '4wpfp......-f|0000002',
  timestamp: 2020-09-02T21:39:01.197Z,
  serviceUrl: 'https://directline.botframework.com/',
  channelId: 'directline',
  from: { id: 'dl_15990824712200.ruhpue7p1j', name: 'Steve', role: 'user' },
  conversation: { id: '4wpfp......-f' },
  recipient: { id: 'botberg@QaeuoeEamLg', name: 'Bot' },      
  textFormat: 'plain',
  locale: 'en-US',
  text: 'Hi',
  entities: [
    {
      type: 'ClientCapabilities',
      requiresBotState: true,
      supportsListening: true,
      supportsTts: true
    }
  ],
  channelData: {
    clientActivityID: '1599082740974mexnvax1jq',
    clientTimestamp: '2020-09-02T21:39:00.974Z'
  },
  rawTimestamp: '2020-09-02T21:39:01.1971653Z',
  callerId: 'urn:botframework:azure'
}

Hope of help!