Web3.utils.hexToUtf8 getting "undefined" error - reactjs

Question

I am trying to return an username from a struct inside a mapping and I am getting this error:
Error: The parameter "undefined" must be a valid HEX string.
contract UserStorage is BaseStorage {
event UserCreated(string _message);
struct Profile {
uint userId;
bytes32 username;
}
mapping(address => Profile) public profiles;
mapping(address => bool) public addresses;
mapping (bytes32 => uint) public usernames;
uint latestUserId = 0;
function createUser(
address _address,
bytes32 _username
) public onlyControllerAddr returns(uint) {
latestUserId++;
profiles[_address] = Profile(
latestUserId,
_username
);
addresses[_address] = true;
usernames[_username] = latestUserId;
emit UserCreated("Membership Confirmed");
return latestUserId;
}
}
class UserAccount extends React.Component {
state = { dataKey: null };
componentDidMount() {
const { drizzle, drizzleState } = this.props;
const contract = drizzle.contracts.UserStorage;
const account = drizzleState.accounts[0];
const dataKey = contract.methods['profiles'].cacheCall(account);
this.setState({ dataKey });
}
render() {
const { UserStorage } = this.props.drizzleState.contracts;
const displayData = UserStorage.profiles[this.state.dataKey];
const user = displayData && displayData.value[1];
const username = Web3.utils.hexToUtf8(user);
console.log(user);
return (
<div>Hello: {user}</div>
)
}
}
export default UserAccount;
Here are values that are returned:
user:
0x426f620000000000000000000000000000000000000000000000000000000000
const displayData:
{args: Arguments(1), fnIndex: 6, value: Result, error: null}args: Arguments ["0x1C16e11e45Ae1601186E05EE64f38276FAb2239a", callee: (...), Symbol(Symbol.iterator): ƒ]error: nullfnIndex: 6value: Result {0: "1", 1: "0x426f620000000000000000000000000000000000000000000000000000000000", userId: "1", username: "0x426f620000000000000000000000000000000000000000000000000000000000"}__proto__: Object