fix: microphone and camera select issue in legacy call (#12105)

Signed-off-by: Murat Ersin <muratersin@yahoo.com>

src/components/views/voip/LegacyCallView/LegacyCallViewButtons.tsx

@@ -16,7 +16,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { ComponentProps, createRef, useState } from "react";
+import React, { ComponentProps, createRef, useState, forwardRef } from "react";
 import classNames from "classnames";
 import { MatrixCall } from "matrix-js-sdk/src/webrtc/call";
 
@@ -48,14 +48,8 @@ type ButtonProps = Omit<ComponentProps<typeof AccessibleTooltipButton>, "title"
     offLabel?: string;
 };
 
-const LegacyCallViewToggleButton: React.FC<ButtonProps> = ({
+const LegacyCallViewToggleButton = forwardRef<HTMLElement, ButtonProps>(
-    children,
+    ({ children, state: isOn, className, onLabel, offLabel, ...props }, ref) => {
-    state: isOn,
-    className,
-    onLabel,
-    offLabel,
-    ...props
-}) => {
         const classes = classNames("mx_LegacyCallViewButtons_button", className, {
             mx_LegacyCallViewButtons_button_on: isOn,
             mx_LegacyCallViewButtons_button_off: !isOn,
@@ -63,6 +57,7 @@ const LegacyCallViewToggleButton: React.FC<ButtonProps> = ({
 
         return (
             <AccessibleTooltipButton
+                ref={ref}
                 className={classes}
                 title={isOn ? onLabel : offLabel}
                 alignment={Alignment.Top}
@@ -71,7 +66,8 @@ const LegacyCallViewToggleButton: React.FC<ButtonProps> = ({
                 {children}
             </AccessibleTooltipButton>
         );
-};
+    },
+);
 
 interface IDropdownButtonProps extends ButtonProps {
     deviceKinds: MediaDeviceKindEnum[];