Set the ref on the actual carousel div

app/soapbox/components/ui/hstack/hstack.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React from 'react';
+import React, { forwardRef } from 'react';
 
 const justifyContentOptions = {
   between: 'justify-between',
@@ -32,6 +32,8 @@ interface IHStack {
   alignItems?: 'top' | 'bottom' | 'center' | 'start',
   /** Extra class names on the <div> element. */
   className?: string,
+  /** Children */
+  children?: React.ReactNode,
   /** Horizontal alignment of children. */
   justifyContent?: 'between' | 'center' | 'start' | 'end' | 'around',
   /** Size of the gap between elements. */
@@ -43,12 +45,13 @@ interface IHStack {
 }
 
 /** Horizontal row of child elements. */
-const HStack: React.FC<IHStack> = (props) => {
+const HStack = forwardRef<HTMLDivElement, IHStack>((props, ref) => {
   const { space, alignItems, grow, justifyContent, className, ...filteredProps } = props;
 
   return (
     <div
       {...filteredProps}
+      ref={ref}
       className={classNames('flex', {
         // @ts-ignore
         [alignItemsOptions[alignItems]]: typeof alignItems !== 'undefined',
@@ -60,6 +63,6 @@ const HStack: React.FC<IHStack> = (props) => {
       }, className)}
     />
   );
-};
+});
 
 export default HStack;

app/soapbox/features/feed-filtering/feed-carousel.tsx

@@ -110,7 +110,7 @@ const FeedCarousel = () => {
   }
 
   return (
-    <Card variant='rounded' size='lg' ref={setCardRef} className='relative' data-testid='feed-carousel'>
+    <Card variant='rounded' size='lg' className='relative' data-testid='feed-carousel'>
       <div>
         {hasPrevPage && (
           <div>
@@ -131,6 +131,7 @@ const FeedCarousel = () => {
           space={8}
           className='z-0 flex transition-all duration-200 ease-linear scroll'
           style={{ transform: `translateX(-${(currentPage - 1) * 100}%)` }}
+          ref={setCardRef}
         >
           {isLoading ? (
             new Array(pageSize).fill(0).map((_, idx) => (