diff --git a/frontend/src/Editor/Components/QrScanner/QrScanner.jsx b/frontend/src/Editor/Components/QrScanner/QrScanner.jsx
index e5806b582c..201bf9977e 100644
--- a/frontend/src/Editor/Components/QrScanner/QrScanner.jsx
+++ b/frontend/src/Editor/Components/QrScanner/QrScanner.jsx
@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
 import QrReader from 'react-qr-reader';
 import ErrorModal from './ErrorModal';
-import { resolveReferences, resolveWidgetFieldValue } from '@/_helpers/utils';
 
-export const QrScanner = function QrScanner({ component, onEvent, onComponentOptionChanged, currentState }) {
+export const QrScanner = function QrScanner({ styles, fireEvent, setExposedVariable }) {
   const handleError = async (errorMessage) => {
     console.log(errorMessage);
     await setErrorOccured(true);
@@ -11,29 +10,17 @@ export const QrScanner = function QrScanner({ component, onEvent, onComponentOpt
 
   const handleScan = async (data) => {
     if (data !== null || data !== undefined) {
-      await onEvent('onDetect', { component, data: data });
-      await onComponentOptionChanged(component, 'lastDetectedValue', data);
+      await fireEvent('onDetect');
+      await setExposedVariable('lastDetectedValue', data);
     }
   };
 
-  let [errorOccured, setErrorOccured] = useState(false);
+  const [errorOccured, setErrorOccured] = useState(false);
 
-  const widgetVisibility = component.definition.styles?.visibility?.value ?? true;
-  const disabledState = component.definition.styles?.disabledState?.value ?? false;
-
-  const parsedDisabledState =
-    typeof disabledState !== 'boolean' ? resolveWidgetFieldValue(disabledState, currentState) : disabledState;
-
-  let parsedWidgetVisibility = widgetVisibility;
-
-  try {
-    parsedWidgetVisibility = resolveReferences(parsedWidgetVisibility, currentState, []);
-  } catch (err) {
-    console.log(err);
-  }
+  const { visibility, disabledState } = styles;
 
   return (
-    <div data-disabled={parsedDisabledState} style={{ display: parsedWidgetVisibility ? '' : 'none' }}>
+    <div data-disabled={disabledState} style={{ display: visibility ? '' : 'none' }}>
       {errorOccured ? <ErrorModal /> : <QrReader onError={handleError} onScan={handleScan} />}
     </div>
   );