How to reference CSS Classes in a different class in Material UI

I want to reference a CSS class in another CSS class present in the same makeStyles hook.

import React from 'react';
import { makeStyles, Typography, Grid } from '@material-ui/core';

const styles = makeStyles((theme) => ({
    root: {},
    textStyle: {
        fontFamily: 'Brandon',
        textTransform: 'uppercase',
        cursor: 'pointer',
        '&:hover': {
            color: `${theme.palette.primary.contrastText} !important`,
            $dropDown: {
                // I want to apply this style to the dropDown class when I hover over the textStyle Class
                opacity: 1,
            },
        },
    },
    dropDown: {
        width: 'max-content',
        position: 'absolute',
        top: '80px',
        backgroundColor: 'tomato',
        pointerEvents: 'none',
        opacity: 0, // manipulate this
    },
    dropDownList: {
        padding: '30px 0px 50px',
        minWidth: '200px',
        position: 'relative',
        width: 'auto',
    },
    text: {
        // fontFamily: 'Brandon',
        padding: '4px 0px',
    },
    dropDownItem: {
        padding: '5px 0px',
    },
}));

const Shop: React.FC = () => {
    const classes = styles();

    const trendingArr = [
        'New Arrivals',
        'Best Sellers',
        'The Summer Edit',
        'FRAME & Mejuri',
        'New Arrivals',
        'Best Sellers',
        'The Summer Edit',
        'FRAME & Mejuri',
    ];
    return (
        <>
            <Typography variant='body1' className={classes.textStyle}>
                Shop
            </Typography>
            <Grid container direction='row' className={classes.dropDown}>
                <Grid
                    container
                    direction='column'
                    className={classes.dropDownList}
                >
                    <Typography variant='body2' className={classes.text}>
                        <b>Trending</b>
                    </Typography>
                    {trendingArr.map((item, i) => (
                        <Typography
                            className={classes.dropDownItem}
                            variant='body2'
                            key={i}
                        >
                            {item}
                        </Typography>
                    ))}
                </Grid>
                {/* another one */}
                <Grid
                    container
                    direction='column'
                    className={classes.dropDownList}
                >
                    <Typography variant='body2' className={classes.text}>
                        <b>Trending</b>
                    </Typography>
                    {trendingArr.map((item, i) => (
                        <Typography
                            className={classes.dropDownItem}
                            variant='body2'
                            key={i}
                        >
                            {item}
                        </Typography>
                    ))}
                </Grid>
            </Grid>
        </>
    );
};

export default Shop;

I want to reference the dropDown class inside the hover selector of textStyle to change the opacity whenever I hover over the textStyle class. How can I achieve it ?