eslint-plugin-tss-unused-classes detects every class as unused

[thanosoncode]

Hello,
I installed plugin and modified eslintrc as shown here
however it detects each in every class in the code as unused.
Am I missing something? Thank you

Line 10:5: Class root is unused tss-unused-classes/unused-classes
Line 18:5: Class row is unused tss-unused-classes/unused-classes
Line 23:5: Class name is unused tss-unused-classes/unused-classes`

const LocationsList: React.FC<LocationsListProps> = (props) => {
  const { classes } = useStyles(props);

  return (
    <Grid container direction="row" className={classes.root}>
      {[...props.locations].map((l, index) => (
        <Grid container key={index} item className={classes.row}>
          <Typography className={classes.name}>{l.name}</Typography>
        </Grid>
      ))}
    </Grid>
  );
};

import { Theme } from '@mui/material/styles';
import { makeStyles } from 'tss-react/mui';

import { VERY_LIGHT_BLUE } from '@globalwebindex/platform2-react-ui-components/src/theme';
import { LocationsListProps } from './LocationsList.component';
import { METADATA_WAVES_LOCATIONS_HEIGHT } from '../../types/constants';

export const useStyles = makeStyles<LocationsListProps>()((theme: Theme, props) => {
  return {
    root: {
      display: 'grid',
      height: props.pathname === '/metadata' ? '100%' : METADATA_WAVES_LOCATIONS_HEIGHT,
      overflowY: 'auto',
      gridTemplateColumns: 'repeat(auto-fill, 160px)',
      gridTemplateRows: 'repeat(auto-fill, 50px)',
      gap: '8px'
    },
    row: {
      borderBottom: `1px solid ${VERY_LIGHT_BLUE}`,
      height: 50,
      alignItems: 'center'
    },
    name: {
      margin: theme.spacing(0, 4),
      fontWeight: 600
    }
  };
});

[garronej]

Hello @thanosoncode,

Unfortunately, the plugin only works when the styles are in the same file as the component (which is the recommended approach).

Sorry...