How to make flex grow work even though parent has flex property and it should work?

Question

I am making a react app, I am making a div in the base layout so that it grows to cover the whole screen. Basically not leaving empty space below the footer in case there is no content.

Now, ideally it should work without problems but I have no idea on what's happening here.

Baselayout.tsx

export const BaseLayout: FC = ({ children }) => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <NormalUserHeader />
        <div className={classes.grow}>
          {children}
        </div>
      <SubscriptionFooter />
      <Footer />
    </div>
  );
};

BaselayoutCSS.ts

import { makeStyles } from "@material-ui/core";

export const useStyles = makeStyles((theme) => ({
    root: {
      display: 'flex',
      flexFlow: 'column',
    },
    grow: {
      backgroundColor: 'white',
      // flex: '1 1 auto', //This is also what i was trying before
      flexGrow: 1

    }
  }));
  

I have tried the flexbox approach, and It's not working. I have looked at other similar questions and none of those approaches are working.

Make a div fill the height of the remaining screen space

Fill remaining vertical space with CSS using display:flex

I am quite clueless as to what I did wrong here. : ) Any help is appreciated.