antd Form initialValue render to another value

Right now I am facing an issue and I am not sure if it was able to solve in antd. Below is my code:

        <FormItem>
          {getFieldDecorator('userName', {
            initialValue: record.userName,
            rules: [
              {
                required:  true,
                message: 'Please input userName'
              }
            ]
          })(
            <Input
              style={myStyle}
            />
          )}
        </FormItem>

This input is for the user to input their userName, and next time they look back, the default(initialValue) is the userName they input. But now I want to keep this initialValue but render it in a different way. Ideally, I want it like this:

            <FormItem>
              {getFieldDecorator('userName', {
                initialValue: record.userName,
                render: record.userName + '(' + record.userID + ')',
                rules: [
                  {
                    required:  true,
                    message: 'Please input userName'
                  }
                ]
              })(
                <Input
                  style={myStyle}
                />
              )}
            </FormItem>

Which ask the user to input their username only, but will add their userID automatically for display/render only(bracket and userID should not be a part of the value of this input, just display only).

Is there any way to implement that feature on the rendering part?