Fix bug where captions keep scrolling to the bottom when new captions are received (#3353)

* scrolling bug

* Change files

* Duplicate change files for beta release

Author: carocao-msft

change-beta/@azure-communication-react-f04c8097-5d3f-4fa3-8ee9-a3a6d895894a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fixed bug where captions keep scrolling to the bottom when new captions are received ",
+  "packageName": "@azure/communication-react",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-f04c8097-5d3f-4fa3-8ee9-a3a6d895894a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fixed bug where captions keep scrolling to the bottom when new captions are received ",
+  "packageName": "@azure/communication-react",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/CaptionsBanner.tsx

@@ -87,7 +87,7 @@ export const _CaptionsBanner = (props: _CaptionsBannerProps): JSX.Element => {
     return () => {
       captionsScrollDiv?.removeEventListener('scroll', handleScrollToTheBottom);
     };
-  }, [handleScrollToTheBottom]);
+  }, [handleScrollToTheBottom, isCaptionsOn]);
 
   useEffect(() => {
     // only auto scroll to bottom is already is at bottom of scroll before new caption comes in