Как изменить стили одного элемента при изменении свойств другого с использованием makeStyles?

Есть инпут с двумя дивами (для изменения формы инпута)

 <div className={classes.wrapper}>
        <label className={classes.label} htmlFor={id}>{unit}</label>
        <input
            className={classes.root}
            onChange={(e) => changeInputValue(e.target.value)}
            value={inputValue}
            disabled={!isEditing}
            id={id}
        />
        <div className={classes.arrayTop}></div>
        <div className={classes.arrayBottom}></div>
    </div>

Есть стили, написанные с помощью makeStyles:

const useStyles = makeStyles((theme: ThemeInterface) => ({
wrapper: {
    position: 'relative',
},
root: {
    maxWidth: '154px',
    padding: '14px 16px',
    border: '1px solid #EAECEF',
    color: theme.palette.secondary.main,
    fontWeight: 600,
    fontSize: '18px',
    borderRight: 'none',
    borderTopLeftRadius: '14px',
    borderBottomLeftRadius: '14px',
    '&:focus': {
        border: '1px solid #F57C00',
        borderRight: 'none',
        '&$arrayTop': {
            border: '1px solid #000',
        }
    },
    '&:invalid': {
        border: `1px solid ${theme.palette.error.main}`,
        borderRight: 'none',
    }
},
label: {
    color: '#7F8285',
    fontSize: '14px',
    position: 'absolute',
    right: '10px',
    top: 'calc(50% - 20px/2)',
    zIndex: 4
},
arrayTop: {
    position: 'absolute',
    height: '30px',
    width: '18px',
    overflow: 'hidden',
    top: '-1px',
    right: '-16px',
    '&::after': {
        content: '""',
        position: 'absolute',
        top: '-3px',
        right: '14px',
        width: '34px',
        height: '52px',
        transform: 'rotate(73deg)',
        border: '1px solid #EAECEF',
        borderRadius: '10px',
        backgroundColor: '#FFF'
    },
},
arrayBottom: {
    position: 'absolute',
    height: '26px',
    width: '18px',
    overflow: 'hidden',
    bottom: '-1px',
    right: '-15px',
    '&::after': {
        content: '""',
        position: 'absolute',
        bottom: '-3.5px',
        right: '14px',
        width: '32px',
        height: '52px',
        transform: 'rotate(-73deg)',
        border: '1px solid #EAECEF',
        borderRadius: '10px',
        backgroundColor: '#FFF'
    },
}

}))

Мне нужно при фокусе, активности инпута менять стили у arrayTop::after и arrayBottom::after. Я не понимаю как это сделать. Должно получиться вот так: