How to pass parameter to makeStyles in @fluentui/react-components

Question

I am trying Fluent UI React V9, and try to pass the color style from function component to makeStyles.

Here is my codesandbox:

import { Button, ButtonProps, makeStyles } from "@fluentui/react-components";
import * as React from 'react';
const useStyles = (props) =>
  makeStyles({
    sheetClass: {
      color: props.color,
    },
  });
export const Default = () =>{
  let sheets = [{name:"Test1", tabColor:"red"},
  {name:"Test2", tabColor:"green"}]
  return (
    <div>
      {sheets.map((sheet) => {
        const props = {
          color: sheet.tabColor,
        };
        const labelStyles = useStyles(props);
        return (
          <div>
            <Button className={labelStyles.sheetClass}>
              {sheet.name}
            </Button>
          </div>
        );
      })}
    </div>
  );

It will throw error

React Hook "useStyles" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function. (react-hooks/rules-of-hooks)

I tried above by referring the guide for mui, but it seems they are different.

Is there any way to pass variable from component to style?