I would like to change the hover effect on the text letters while hovering on the whole material UI container

this is my code:

import React, { Component } from "react";
import MobileDetect from "mobile-detect";
import { map, orderBy, flowRight as compose, isEmpty, get } from "lodash";
import {
  Grid,
  List,
  Avatar,
  ListItem,
  Typography,
  ListItemSecondaryAction,
  withStyles
} from "@material-ui/core";
import PageSubTitle from "./PageSubTitle";
import NotificationBar from "./NotificationBar";

const style = (theme) => ({
  highlightedText: {
    cursor: "pointer"
  },
  logoAvatar: {
    width: 60,
    height: 60,
    borderRadius: "5%",
    background: theme.palette.common.white,
    [theme.breakpoints.down("xs")]: {
      width: 40,
      height: 40
    }
  },
  logoImg: {
    width: "100%",
    height: "unset"
  },
  listItemRoot: {
    "&:hover": {
      boxShadow: "0px 4px 10px rgba(0, 122, 255, 0.25)"
    }
  },
  listItemText: {
    padding: "0 16px"
  },
  goToPortal: {
    display: "flex",
    "vertical-align": "middle",
    "justify-content": "center",
    "align-items": "center",
    [theme.breakpoints.down("xs")]: {
      "justify-content": "start"
    }
  },
  inline: {
    display: "flex",
    [theme.breakpoints.down("xs")]: {
      "font-size": "10px"
    }
  }
});

const depositVendors = [
  {
    skrill: {
      value: "skrill",
      acronym: "SKR",
      label: "Skrill",
      isRealDeposit: true,
      manuallyCreated: false,
      clientPermitted: true,
      supportCurrencyConverstation: false,
      allowCompleteRejected: true, // skrill can reject a transaction first and then complete it
      fundingCategory: "eWallet",
      localization: { id: "", defaultMessage: "" }
    }
  }
];

const countryPaymentOptions = [
  {
    id: 25,
    country: "_default",
    paymentOption: {
      id: 25,
      name: "Klarpay",
      provider: "klarpay",
      logoUrl:
        "https://bdswiss-dev.s3-eu-west-1.amazonaws.com/payment-method-logos/astropay/1543430750284",
      localizationKey: "",
      paymentKey: "ob-sandbox-natwest",
      additionalFields: "{}",
      bankDetails: [],
      ccType: null,
      processingTime: null,
      processingTimeValue: null,
      minMaxAmount: null,
      transactionFee: null,
      __typename: "PaymentOptionType"
    },
    enabled: true,
    rank: 0,
    popular: false,
    __typename: "CountryPaymentOptionType"
  }
];

const account = {
  __typename: "ForexMauritiusAccount",
  id: 22,
  currency: "USD",
  balance: 0,
  isDemo: false,
  hidden: false,
  remoteId: "6224776",
  availableWithdrawalOptions: [
    "neteller",
    "skrill",
    "bankTransfer",
    "payRetailers",
    "BTC"
  ],
  withdrawals: [],
  minimumDeposit: 10,
  accountName: null,
  minimumPartialDeposit: 0,
  minimumBonusDeposit: 10,
  isArchived: false,
  isViewOnly: false,
  accountSubtype: "basic",
  isReadOnly: true,
  freeMargin: 0,
  withdrawalsBlocked: false,
  copyTrading: null,
  eligibleBonus: {
    eligibleBonus: true,
    accountTypeBonus: "basic",
    daysLeft: 26,
    percentage: 0.3,
    maxAmount: 500,
    terms:
      "https://bdswiss.s3.eu-central-1.amazonaws.com/BDSwiss_Bonus_TC_BDSMarkets.pdf",
    __typename: "eligibleBonusAccountTypeType"
  },
  swapFree: false
};

const getFormattedAmount = ({ currency, amount, locale }) => {
  return Intl.NumberFormat(locale || {}, {
    style: "currency",
    currency,
    minimumFractionDigits: 2
  }).format(amount);
};

function isMobile() {
  const md = new MobileDetect(window.navigator.userAgent);
  return !!md.mobile() || !!md.versionStr("Mobile");
}

export class PaymentMethodSelection extends Component {
  render() {
    const {
      locale,
      classes,
      onPaymentMethodSelected,
      selectedPaymentMethodId
    } = this.props;
    const formattedAmount = getFormattedAmount({
      amount: 100,
      currency: "EUR",
      locale: "en"
    });
    return (
      <Grid container spacing={!isMobile() ? 3 : 0}>
        <Grid item xs={12}>
          <PageSubTitle>
            <Typography>Select deposit method for</Typography>
          </PageSubTitle>
          <NotificationBar status="info" noMargin>
            <Typography variant="body1">{formattedAmount}</Typography>
          </NotificationBar>
        </Grid>
        <Grid item xs={12}>
          <List>
            {map(
              orderBy(countryPaymentOptions, (opt) => opt.rank, ["desc"]),
              (opt, i) => {
                const { paymentOption } = opt;
                const transactionFee = get(paymentOption, "transactionFee");
                const minPaymentOptionAmount = getFormattedAmount({
                  amount: 100,
                  currency: account.currency,
                  locale
                });
                const maxPaymentOptionAmount = getFormattedAmount({
                  amount: get(paymentOption, "minMaxAmount"),
                  currency: account.currency,
                  locale
                });
                const feesPaymentOptionAmount =
                  transactionFee === "No Fees"
                    ? "No Fees"
                    : getFormattedAmount({
                        amount: 100,
                        currency: "EUR",
                        locale: "en"
                      });
                let paymentOptionName;
                if (isEmpty(paymentOption.localizationKey)) {
                  paymentOptionName =
                    paymentOption.name ||
                    depositVendors[paymentOption.provider].label;
                } else {
                  if (
                    depositVendors[paymentOption.provider].label ===
                    depositVendors[paymentOption.provider].localization.t(
                      locale
                    )
                  ) {
                    paymentOptionName =
                      paymentOption.name ||
                      depositVendors[paymentOption.provider].label;
                  } else {
                    paymentOptionName = depositVendors[
                      paymentOption.provider
                    ].localization.t(locale);
                  }
                }
                return (
                  <React.Fragment key={i}>
                    <ListItem
                      classes={{ root: classes.listItemRoot }}
                      key={i}
                      button
                      onClick={(e) => onPaymentMethodSelected(opt.id)}
                    >
                      <Grid
                        container
                        justifyContent="space-between"
                        spacing={1}
                      >
                        <Grid item xs={2} className={classes.goToPortal}>
                          <Grid container>
                            <Grid item xs={12}>
                              <Avatar
                                alt={paymentOption.name}
                                src={paymentOption.logoUrl}
                                className={classes.logoAvatar}
                                imgProps={{ className: classes.logoImg }}
                              />
                            </Grid>
                          </Grid>
                        </Grid>
                        <Grid item xs={9}>
                          <Grid
                            container
                            direction="row"
                            justifyContent="flex-start"
                            alignItems="center"
                            spacing={2}
                            style={{ color: "blue" }}
                          >
                            <Grid item xs={12}>
                              <Typography
                                variant="body2"
                                className={classes.inline}
                              >
                                {paymentOptionName}
                              </Typography>
                            </Grid>
                            {get(paymentOption, "processingTime") && (
                              <Grid item>
                                <Grid container>
                                  {/* <Grid item>
                                    <img alt="test" />
                                  </Grid> */}
                                  <Grid item>
                                    <Typography
                                      variant="body1"
                                      className={classes.inline}
                                    >
                                      10 days
                                    </Typography>
                                  </Grid>
                                </Grid>
                              </Grid>
                            )}
                            <Grid item>
                              <Grid container>
                                {/* <Grid item>
                                  <img alt="test" />
                                </Grid> */}
                                <Grid item>
                                  <Typography
                                    variant="body1"
                                    className={classes.inline}
                                  >
                                    {" "}
                                    {minPaymentOptionAmount} -{" "}
                                    {maxPaymentOptionAmount}{" "}
                                  </Typography>
                                </Grid>
                              </Grid>
                            </Grid>
                            <Grid item>
                              <Grid container>
                                {/* <Grid item>
                                  <img alt="test" />
                                </Grid> */}
                                <Grid item>
                                  <Typography
                                    variant="body1"
                                    className={classes.inline}
                                  >
                                    {" "}
                                    {feesPaymentOptionAmount}{" "}
                                  </Typography>
                                </Grid>
                              </Grid>
                            </Grid>
                          </Grid>
                        </Grid>
                        <Grid item xs={1} className={classes.goToPortal}>
                          <Grid container>
                            <Grid item xs={12}>
                              {opt.id === selectedPaymentMethodId && (
                                <ListItemSecondaryAction>
                                  <img alt="test" />
                                </ListItemSecondaryAction>
                              )}
                            </Grid>
                          </Grid>
                        </Grid>
                      </Grid>
                    </ListItem>
                  </React.Fragment>
                );
              }
            )}
          </List>
        </Grid>
      </Grid>
    );
  }
}

export default compose(withStyles(style))(PaymentMethodSelection);

this is the result without hover:

this is with hover so far:

this is how I want it to look:

Hello guys, I am trying to add some hover effect over a container using MUI grids and typography. There are 3 elements on my main grid. The Title, the image and the US Currency line. I have managed to add the hover effect on the whole container but I cant seem to be able to add the text colour change while on hover. I want the us currency line to change to colour black on hover.