Environment Information

• Package version(s): @fluent/react-components==9.2.0
• Browser and OS versions: (irrelevant)

Describe the issue:

weight attribute does not work with predefined styled text components (<Body1 />, <Caption1 />, <Caption2 />, etc.)

Actual behavior:

import { Text, Body1 } from "@fluentui/react-components";
import * as React from "react";
export const Weight = () => (
  <div
    style={{
      display: "flex",
      gap: 20
    }}
  >
    <Text weight="semibold">Semibold weight 1</Text>
    <Body1 weight="semibold">Semibold weight 2</Body1>
  </div>
);

"Semibold weight 2" is rendered in regular weight.

Expected behavior:

Both texts should be in semibold weight.

If applicable, please provide a codepen repro:

https://codesandbox.io/s/mystifying-gwen-yyr4h1?file=/example.tsx:0-307

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? Yes

Requested priority: Low

Products/sites affected: MS internal-only product