diff --git a/apps/vr-tests-react-components/src/stories/Charts/DonutChart.stories.tsx b/apps/vr-tests-react-components/src/stories/Charts/DonutChart.stories.tsx
index d8f99d1ea3d3d..f80801046db6e 100644
--- a/apps/vr-tests-react-components/src/stories/Charts/DonutChart.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Charts/DonutChart.stories.tsx
@@ -18,8 +18,8 @@ export default {
 
 export const Basic = () => {
   const points: ChartDataPoint[] = [
-    { legend: 'first', data: 20000, color: '#DADADA', xAxisCalloutData: '2020/04/30' },
-    { legend: 'second', data: 39000, color: '#0078D4', xAxisCalloutData: '2020/04/20' },
+    { legend: 'first', data: 20000, gradient: ['#DADADA', '#DADADA'], xAxisCalloutData: '2020/04/30' },
+    { legend: 'second', data: 39000, gradient: ['#0078D4', '#0078D4'], xAxisCalloutData: '2020/04/20' },
   ];
 
   const data: ChartProps = {
@@ -54,22 +54,22 @@ export const Dynamic = () => {
       {
         legend: 'first',
         data: Math.floor(120),
-        color: '#00bcf2',
+        gradient: ['#00bcf2', '#00bcf2'],
       },
       {
         legend: 'second',
         data: Math.floor(130),
-        color: '#b4a0ff',
+        gradient: ['#b4a0ff', '#b4a0ff'],
       },
       {
         legend: 'third',
         data: Math.floor(10),
-        color: '#fff100',
+        gradient: ['#fff100', '#fff100'],
       },
       {
         legend: 'fourth',
         data: Math.floor(270),
-        color: '#605e5c',
+        gradient: ['#605e5c', '#605e5c'],
       },
     ],
   };
diff --git a/apps/vr-tests-react-components/src/stories/Charts/HorizontalBarChart.stories.tsx b/apps/vr-tests-react-components/src/stories/Charts/HorizontalBarChart.stories.tsx
index be0c4ff1e088b..267cc5a099f06 100644
--- a/apps/vr-tests-react-components/src/stories/Charts/HorizontalBarChart.stories.tsx
+++ b/apps/vr-tests-react-components/src/stories/Charts/HorizontalBarChart.stories.tsx
@@ -35,7 +35,7 @@ export const Basic = () => {
         {
           legend: 'one',
           horizontalBarChartdata: { x: 1543, y: 15000 },
-          color: '#4cb4b7',
+          gradient: ['#4cb4b7', '#4cb4b7'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '10%',
         },
@@ -47,7 +47,7 @@ export const Basic = () => {
         {
           legend: 'two',
           horizontalBarChartdata: { x: 800, y: 15000 },
-          color: '#800080',
+          gradient: ['#800080', '#800080'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '5%',
         },
@@ -59,7 +59,7 @@ export const Basic = () => {
         {
           legend: 'three',
           horizontalBarChartdata: { x: 8888, y: 15000 },
-          color: '#ff0000',
+          gradient: ['#ff0000', '#ff0000'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '59%',
         },
@@ -71,7 +71,7 @@ export const Basic = () => {
         {
           legend: 'four',
           horizontalBarChartdata: { x: 15888, y: 15000 },
-          color: '#fbc0c3',
+          gradient: ['#fbc0c3', '#fbc0c3'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '105%',
         },
@@ -83,7 +83,7 @@ export const Basic = () => {
         {
           legend: 'five',
           horizontalBarChartdata: { x: 11444, y: 15000 },
-          color: '#f7630c',
+          gradient: ['#f7630c', '#f7630c'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '76%',
         },
@@ -95,7 +95,7 @@ export const Basic = () => {
         {
           legend: 'six',
           horizontalBarChartdata: { x: 14000, y: 15000 },
-          color: '#107c10',
+          gradient: ['#107c10', '#107c10'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '93%',
         },
@@ -107,7 +107,7 @@ export const Basic = () => {
         {
           legend: 'seven',
           horizontalBarChartdata: { x: 9855, y: 15000 },
-          color: '#6e0811',
+          gradient: ['#6e0811', '#6e0811'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '65%',
         },
@@ -119,7 +119,7 @@ export const Basic = () => {
         {
           legend: 'eight',
           horizontalBarChartdata: { x: 4250, y: 15000 },
-          color: '#3a96dd',
+          gradient: ['#3a96dd', '#3a96dd'],
           xAxisCalloutData: '2020/04/30',
           yAxisCalloutData: '28%',
         },
@@ -149,7 +149,7 @@ export const WithBenchmark = () => {
           legend: 'one',
           data: 50,
           horizontalBarChartdata: { x: 10, y: 100 },
-          color: '#4cb4b7',
+          gradient: ['#4cb4b7', '#4cb4b7'],
         },
       ],
     },
@@ -160,7 +160,7 @@ export const WithBenchmark = () => {
           legend: 'two',
           data: 30,
           horizontalBarChartdata: { x: 30, y: 200 },
-          color: '#800080',
+          gradient: ['#800080', '#800080'],
         },
       ],
     },
@@ -171,7 +171,7 @@ export const WithBenchmark = () => {
           legend: 'three',
           data: 5,
           horizontalBarChartdata: { x: 15, y: 50 },
-          color: '#ff0000',
+          gradient: ['#ff0000', '#ff0000'],
         },
       ],
     },
@@ -198,7 +198,7 @@ export const Variant = () => {
         {
           legend: 'one',
           horizontalBarChartdata: { x: 1543, y: 15000 },
-          color: '#4cb4b7',
+          gradient: ['#4cb4b7', '#4cb4b7'],
         },
       ],
     },
@@ -208,7 +208,7 @@ export const Variant = () => {
         {
           legend: 'two',
           horizontalBarChartdata: { x: 800, y: 15000 },
-          color: '#800080',
+          gradient: ['#800080', '#800080'],
         },
       ],
     },
@@ -218,7 +218,7 @@ export const Variant = () => {
         {
           legend: 'three',
           horizontalBarChartdata: { x: 8888, y: 15000 },
-          color: '#ff0000',
+          gradient: ['#ff0000', '#ff0000'],
         },
       ],
     },
@@ -228,7 +228,7 @@ export const Variant = () => {
         {
           legend: 'four',
           horizontalBarChartdata: { x: 15888, y: 15000 },
-          color: '#fbc0c3',
+          gradient: ['#fbc0c3', '#fbc0c3'],
         },
       ],
     },
@@ -238,7 +238,7 @@ export const Variant = () => {
         {
           legend: 'five',
           horizontalBarChartdata: { x: 11444, y: 15000 },
-          color: '#f7630c',
+          gradient: ['#f7630c', '#f7630c'],
         },
       ],
     },
@@ -248,7 +248,7 @@ export const Variant = () => {
         {
           legend: 'six',
           horizontalBarChartdata: { x: 14000, y: 15000 },
-          color: '#107c10',
+          gradient: ['#107c10', '#107c10'],
         },
       ],
     },
@@ -258,7 +258,7 @@ export const Variant = () => {
         {
           legend: 'seven',
           horizontalBarChartdata: { x: 9855, y: 15000 },
-          color: '#6e0811',
+          gradient: ['#6e0811', '#6e0811'],
         },
       ],
     },
@@ -268,7 +268,7 @@ export const Variant = () => {
         {
           legend: 'eight',
           horizontalBarChartdata: { x: 4250, y: 15000 },
-          color: '#3a96dd',
+          gradient: ['#3a96dd', '#3a96dd'],
         },
       ],
     },
diff --git a/packages/react-components/react-virtualizer/library/etc/react-virtualizer.api.md b/packages/react-components/react-virtualizer/library/etc/react-virtualizer.api.md
index 6b3c901b351b6..3bcd16bcd6814 100644
--- a/packages/react-components/react-virtualizer/library/etc/react-virtualizer.api.md
+++ b/packages/react-components/react-virtualizer/library/etc/react-virtualizer.api.md
@@ -6,10 +6,7 @@
 
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
-import type { FC } from 'react';
-import type { MutableRefObject } from 'react';
 import * as React_2 from 'react';
-import type { RefObject } from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
@@ -132,7 +129,7 @@ export const useVirtualizerScrollViewStyles_unstable: (state: VirtualizerScrollV
 export const useVirtualizerStyles_unstable: (state: VirtualizerState) => VirtualizerState;
 
 // @public
-export const Virtualizer: FC<VirtualizerProps>;
+export const Virtualizer: React_2.FC<VirtualizerProps>;
 
 // @public
 export type VirtualizerChildRenderFunction = (index: number, isScrolling: boolean) => React_2.ReactNode;
@@ -152,10 +149,10 @@ export const VirtualizerContextProvider: React_2.Provider<VirtualizerContextProp
 
 // @public (undocumented)
 export type VirtualizerDataRef = {
-    progressiveSizes: RefObject<number[]>;
-    nodeSizes: RefObject<number[]>;
+    progressiveSizes: React_2.RefObject<number[]>;
+    nodeSizes: React_2.RefObject<number[]>;
     setFlaggedIndex: (index: number | null) => void;
-    currentIndex: RefObject<number>;
+    currentIndex: React_2.RefObject<number>;
 };
 
 // @public (undocumented)