GridArea in a JSX file

Question

Beginner here. I'm developing a Word Add-in using the React framework in OfficeJS.

I'm trying to position my components using Grid. My GridTemplateAreas loads correctly. However, I can't position my components in my Grid by using GridArea. My components are positioned one after the other in the different areas, from left to right and from top to bottom, without taking into account the GridArea I've assigned them.

This doesn't seem to be an issue with the style, as the background color loads correctly.

Here is my App.jsx :

import { makeStyles } from "@fluentui/react-components";
import PropTypes from "prop-types";
import React from "react";

const useStyles = makeStyles({
  container: {
    display: "grid",
    minHeight: "100vh",
    gridGap: "20px",
    gridTemplateColumns: "1fr 5fr",
    gridTemplateAreas: `
                    'sidebar header'
                    'sidebar herolist'
                    'sidebar footer'
                   `,
  },
sidebar: {
    gridArea: "sidebar",
    backgroundColor: "blue",
    textAlign: "center",
  },
  herolist: {
    gridArea: "herolist",
    backgroundColor: "yellow",
    textAlign: "center",
  },
  header: {
    gridArea: "header",
    backgroundColor: "green",
    textAlign: "center",
  },

  footer: {
    gridArea: `footer`,
    backgroundColor: "red",
    textAlign: "center",
  },
});

const App = (props) => {
  const styles = useStyles();

  return (
    <div className={styles.container}>
      <div className={styles.sidebar}>Sidebar</div>
      <div className={styles.header}>Header</div>
      <div className={styles.herolist}>Herolist</div>
      <div className={styles.footer}>Footer</div>
    </div>
  );
};

App.propTypes = {
  title: PropTypes.string,
};

export default App;

Here's the result, showing that the components have not been positioned in the dedicated area:

Do you have any idea why my GridArea property is not taken into account?

Thanks in advance.