Accessing mapping using address

Accessor.js

import React, { useEffect, useState } from "react";

export default ({drizzle, drizzleState}) => {
  const [dataKey, setDataKey] = useState(null);
  
  useEffect(() => {
    const contract = drizzle.contracts.ComplexStorage;

    // get the value of string1 from the contract
    const dataKey = contract.methods["userToGroup"].cacheCall();

    // Save the dataKey for later use
    setDataKey(dataKey);
  }, [drizzle.contracts.ComplexStorage]);

  // Get the contract state
  const ContractStore = drizzleState.contracts.ComplexStorage;

  // Use the saved 'dataKey' to get the 'group' variable
  const userToGroup = ContractStore.userToGroup[dataKey];

  // Get currentaccount
  const account = drizzleState.accounts[0];

  const group = userToGroup[account];

  return (
    <div className="navbar">
      <div className="group">
        <h2>{account}'s Group: {group && drizzle.web3.utils.toUtf8(group.value)}</h2>
      </div>
      <div className="selector">

      </div>
    </div>
  );
};

ComplexStorage.sol

pragma solidity >=0.4.21 <0.7.0;

contract ComplexStorage {
    mapping (address => Group) public userToGroup;

    Group[] public groupArray;
    Group public singleGroup;

    struct Group {
        string name;
        uint8 members;
    }

    constructor() public {
        address address1 = 0x5EE68F3BFa0b2cc8b1bED1e457F6825466dd6221;
        address address2 = 0xaee905FdD3ED851e48d22059575b9F4245A82B04;

        userToGroup[address1] = Group("Pay Pals", 4);
        userToGroup[address2] = Group("Hollowsesh", 3);
        singleGroup = Group("808 Mafia", 15);

        groupArray.push(userToGroup[address1]);
        groupArray.push(userToGroup[address2]);
    }
}