React JS : a style with condition is working but needs refreshing to apply properly

Hello dear developers !

I am currently working on a Responsive UI/UX screen, in a React web app. The thing is, on a specific size of screen, I need to have the right padding on the general <Grid> downsized from 80px to 16, using spacing().

It works fine, but, as it is applying only on 3 routes, 3 pages, it needs manual refreshes to resize on its original size or to go back on 16px padding.

Here is my code for this purpose, inside the makeStyle I'm using :

    containerWithoutItem: ({ pathname }: any) => ({
        paddingLeft: theme.spacing(10),
        overflow: 'auto',
        '@media screen and (max-width: 1100px)': {
          paddingRight: principleRoutes.includes(pathname) ? theme.spacing(2) : theme.spacing(10)
        }
      }),

And here is my array of the the principleRoutes, up, in the same file :

let principleRoutes = ['/home', '/home/board', '/home/products', '/home/history'];

Of course my Component, inside which is the <Grid /> element, has the proper props declared : pathname, so it works fine, on exactly the routes I need it to work.

I just want to get rid of this refresh need. Because it isn't intuitive for the user, to refresh manually, as the project is on a tablet app purpose.