diff --git a/frontend/src/Editor/Components/DropDown.jsx b/frontend/src/Editor/Components/DropDown.jsx
index b0100b09d1..6378ab579f 100644
--- a/frontend/src/Editor/Components/DropDown.jsx
+++ b/frontend/src/Editor/Components/DropDown.jsx
@@ -41,7 +41,7 @@ export const DropDown = function DropDown({
 
   const currentValueProperty = component.definition.properties.value;
   const value = currentValueProperty ? currentValueProperty.value : '';
-  const [currentValue, setCurrentValue] = useState(value);
+  const [currentValue, setCurrentValue] = useState('');
 
   let newValue = value;
   if (currentValueProperty && currentState) {
@@ -52,6 +52,10 @@ export const DropDown = function DropDown({
     setCurrentValue(newValue);
   }, [newValue]);
 
+  useEffect(() => {
+    onComponentOptionChanged(component, 'value', currentValue);
+  }, [currentValue]);
+
   return (
     <div className="row" style={{ width, height }} onClick={() => onComponentClick(id, component)}>
       <div className="col-auto">
@@ -63,7 +67,7 @@ export const DropDown = function DropDown({
           value={currentValue}
           search={true}
           onChange={(newVal) => {
-            onComponentOptionChanged(component, 'value', newVal);
+            setCurrentValue(newVal);
           }}
           filterOptions={fuzzySearch}
           placeholder="Select.."
diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js
index dfbe248c29..fa431828a5 100644
--- a/frontend/src/Editor/Components/components.js
+++ b/frontend/src/Editor/Components/components.js
@@ -568,7 +568,7 @@ export const componentTypes = [
     description: 'Select one value from options',
     defaultSize: {
       width: 200,
-      height: 30
+      height: 37
     },
     component: 'DropDown',
     others: {
@@ -588,7 +588,7 @@ export const componentTypes = [
 
     },
     exposedVariables: {
-      value: {}
+      value: null
     },
     definition: {
       others: {