What is the best way to pass an object’s data from one page to another in Ionic?

I am trying to pass user data from my main page component to a details page component. I am currently mapping the user data in to a custom Ionic Component. When the custom component is clicked on in the main page, I need it to send the user data to the detail page and render the detail page using the data passed in from the main page.

Main.tsx:

const userAPILink: string = "https://randomuser.me/api/";
const usersToRender: number = 5;

const Main: React.FC<RouteComponentProps> = ({ history }) => {
  interface IUser {
    data: {
      name: string;
      email: string;
      icon: string;
      country: string;
    };
  }
  const [userList, setUserList] = useState<IUser[]>([]);

  useEffect(() => {
    for (let i = 0; i < usersToRender; ++i) {
      (async () => {
        const res = await axios.get(userAPILink);
        let tempUser: IUser = {
          data: {
            name: `${res.data.results[0].name.first} ${res.data.results[0].name.last}`,
            email: `${res.data.results[0].email}`,
            icon: `${res.data.results[0].picture.thumbnail}`,
            country: `${res.data.results[0].location.country}`,
          },
        };
        setUserList((userList) => {
          return [...userList, tempUser];
        });
      })();
    }
  }, []);

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar mode="ios">
          <IonIcon slot="end" ios={optionsOutline} />
          <IonButtons slot="start">
            <IonMenuButton />
          </IonButtons>
          <IonTitle className="ionTextCenter">LOGO</IonTitle>
        </IonToolbar>
      </IonHeader>

      <IonContent fullscreen className="ionPadding">
        <IonHeader collapse="condense"></IonHeader>
        <IonSegment>
          <IonSegmentButton>Tab 1</IonSegmentButton>
          <IonSegmentButton>Tab 2</IonSegmentButton>
          <IonSegmentButton>Tab 3</IonSegmentButton>
        </IonSegment>
        <IonList>
          {userList.map((user, index) => {
            return (
              <IonItem
                key={index}
                onClick={(e) => {
                  e.preventDefault();
                  history.push({
                    pathname: `/detail/${user.data.name}`,
                    state: [
                      user.data.name,
                      user.data.email,
                      user.data.icon,
                      user.data.country,
                    ],
                  });
                }}
              >
                <UserCard id={index} data={user.data}></UserCard>
              </IonItem>
            );
          })}
        </IonList>
      </IonContent>
    </IonPage>
  );
};

export default Main;

UserCard.tsx

type UserCardProps = {
  id: number,
  data: {
    name: string;
    icon: string;
    email: string;
    country: string;
  };
};

class UserCard extends React.Component<UserCardProps> {
  render() {
    return (
      <IonCard
        // routerLink={`detail/${this.props.data.name}`}
        id={this.props.data.name}
      >
        <IonCardHeader className="card-header">
          <IonGrid>
            <IonRow>
              <IonCol size="3">
                <IonAvatar>
                  <img src={this.props.data.icon} />
                </IonAvatar>
              </IonCol>
              <IonCol size="9">
                <IonCardTitle>{this.props.data.name}</IonCardTitle>
                <IonCardSubtitle>{this.props.data.email}</IonCardSubtitle>
              </IonCol>
            </IonRow>
          </IonGrid>
        </IonCardHeader>
        <IonCardContent>
          <IonText>
            <IonLabel>{this.props.data.country}</IonLabel>
          </IonText>
          <IonImg className="character-img"></IonImg>
          Lorem Ipsum is simply dummy text of the printing and typesetting
          industry. Lorem Ipsum has been the industry's standard dummy text ever
          since the 1500s, when an unknown printer took a galley of type and
          scrambled it to make a type specimen book.
        </IonCardContent>
      </IonCard>
    );
  }
}

export default ({
  id,
  data,
}:

{
  id: number
  data: {
    name: string;
    icon: string;
    email: string;
    country: string;
  };
}) => (
  <UserCard
    id={id}
    data={data}
  ></UserCard>
);

Detail.tsx

interface DetailProps extends RouteComponentProps<{
  name: string;
  country: string;
  email: string;
  icon: string;
}> {}

const Detail: React.FC <DetailProps> = ({match, history}) => {
  return (
    <IonPage>
      <DetailComponent id={3} name="Bob" email="email" country="canada" icon="icon" />
    </IonPage>
  );
};

export default Detail;

DetailComponent.tsx

type DetailItemProps = {
  id: number;
  name: string;
  icon: string;
  email: string;
  country: string;
};

class DetailItem extends React.Component<DetailItemProps> {
  render() {
    return (
      <IonHeader>
        <IonToolbar mode="ios">
          <IonIcon slot="end" ios={optionsOutline} />
          <IonButtons slot="start">
            <IonMenuButton />
          </IonButtons>
          <IonTitle className="ionTextCenter">{this.props.name}</IonTitle>
        </IonToolbar>
      </IonHeader>
    );
  }
}

export default ({
  id,
  name,
  icon,
  email,
  country,
}: {
  id: number;
  name: string;
  icon: string;
  email: string;
  country: string;
}) => (
  <DetailItem
    id={id}
    name={name}
    icon={icon}
    email={email}
    country={country}
  ></DetailItem>
);