SVG Component color not changing on hover

import React from 'react';
export const ModerationSVG = () => {
    return (
        <React.Fragment>
            <svg sx={{height: `${height}`, width: `${width}`, color: `${color}`}}>
                <path d="M20 4.512v6.445c0 .401-.148.786-.41 1.07-.264.283-.62.442-.993.442H5.403c-.372 0-.73-.16-.992-.443A1.574 1.574 0 014 10.957V4.512c0-.4.148-.786.41-1.07.264-.283.62-.442.993-.442h13.281c.357.024.692.194.936.475.245.28.38.652.38 1.037z" fill="#A6AAAD" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fillOpacity="0.16"></path>
                <path d="M10.897 12.47h2.235v7.3c.004.161-.023.322-.078.473a1.21 1.21 0 01-.244.402 1.11 1.11 0 01-.371.267 1.073 1.073 0 01-1.225-.263 1.249 1.249 0 01-.326-.848v-7.3l.01-.032z" fill="#A6AAAD" stroke="currentColor" data-stroke="main" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fillOpacity="0.16"></path>
            </svg>
        </React.Fragment>
    )
}

import React from 'react';
export const ModerationSVG = () => {
    return (
        <React.Fragment>
            <svg sx={{height: `${height}`, width: `${width}`, color: `${color}`}}>
                <path d="M20 4.512v6.445c0 .401-.148.786-.41 1.07-.264.283-.62.442-.993.442H5.403c-.372 0-.73-.16-.992-.443A1.574 1.574 0 014 10.957V4.512c0-.4.148-.786.41-1.07.264-.283.62-.442.993-.442h13.281c.357.024.692.194.936.475.245.28.38.652.38 1.037z" fill="#A6AAAD" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fillOpacity="0.16"></path>
                <path d="M10.897 12.47h2.235v7.3c.004.161-.023.322-.078.473a1.21 1.21 0 01-.244.402 1.11 1.11 0 01-.371.267 1.073 1.073 0 01-1.225-.263 1.249 1.249 0 01-.326-.848v-7.3l.01-.032z" fill="#A6AAAD" stroke="currentColor" data-stroke="main" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fillOpacity="0.16"></path>
            </svg>
        </React.Fragment>
    )
}

<div className={styles.commonSettingsContent}><UtilitiesSVG />Dashboard</div>

<div className={styles.commonSettingsContent}><UtilitiesSVG />Dashboard</div>

.commonSettingsContent {
    display: flex;
    align-items: center;
    background: none;
    color: grey;
    font-family: Arvo, Helvetica, serif;
    font-size: 1.6rem;
    gap: 1rem;
}

.commonSettingsContent:hover{
    color: white;
}

.commonSettingsContent {
    display: flex;
    align-items: center;
    background: none;
    color: grey;
    font-family: Arvo, Helvetica, serif;
    font-size: 1.6rem;
    gap: 1rem;
}

.commonSettingsContent:hover{
    color: white;
}