diff --git a/packages/ui/src/components/editor/properties/light/directional/index.tsx b/packages/ui/src/components/editor/properties/light/directional/index.tsx
index 8b1f7a5c35..cc5e663ae4 100644
--- a/packages/ui/src/components/editor/properties/light/directional/index.tsx
+++ b/packages/ui/src/components/editor/properties/light/directional/index.tsx
@@ -39,6 +39,7 @@ import ColorInput from '../../../../../primitives/tailwind/Color'
 import InputGroup from '../../../input/Group'
 import NumericInput from '../../../input/Numeric'
 import NodeEditor from '../../nodeEditor'
+import LightShadowProperties from '../shadowProperties'
 
 /**
  * DirectionalLightNodeEditor is used provides  properties to customize DirectionaLight element.
@@ -73,7 +74,7 @@ export const DirectionalLightNodeEditor: EditorComponentType = (props) => {
           unit="cd"
         />
       </InputGroup>
-      {/*<LightShadowProperties entity={props.entity} component={DirectionalLightComponent} />*/}
+      <LightShadowProperties entity={props.entity} component={DirectionalLightComponent} />
       <InputGroup name="Camera Near" label={t('editor:properties.directionalLight.lbl-cameraNear')}>
         <NumericInput
           min={0}
diff --git a/packages/ui/src/components/editor/properties/light/shadowProperties/index.tsx b/packages/ui/src/components/editor/properties/light/shadowProperties/index.tsx
index b85b2ec626..6cd94b917a 100644
--- a/packages/ui/src/components/editor/properties/light/shadowProperties/index.tsx
+++ b/packages/ui/src/components/editor/properties/light/shadowProperties/index.tsx
@@ -40,7 +40,7 @@ import NumericInput from '../../../input/Numeric'
 /**creating properties for LightShadowProperties component */
 type LightShadowPropertiesProps = {
   entity: Entity
-  comp: Component<any, any>
+  component: Component<any, any>
 }
 
 /**
@@ -50,12 +50,15 @@ type LightShadowPropertiesProps = {
 export const LightShadowProperties: EditorComponentType = (props: LightShadowPropertiesProps) => {
   const { t } = useTranslation()
 
-  const lightComponent = useComponent(props.entity, props.comp).value as any
+  const lightComponent = useComponent(props.entity, props.component) as any
 
   return (
     <>
       <InputGroup name="Cast Shadows" label={t('editor:properties.directionalLight.lbl-castShadows')}>
-        <BooleanInput value={lightComponent.castShadow} onChange={commitProperty(props.comp, 'castShadow')} />
+        <BooleanInput
+          value={lightComponent.castShadow.value}
+          onChange={commitProperty(props.component, 'castShadow')}
+        />
       </InputGroup>
       <InputGroup name="Shadow Bias" label={t('editor:properties.directionalLight.lbl-shadowBias')}>
         <NumericInput
@@ -65,9 +68,9 @@ export const LightShadowProperties: EditorComponentType = (props: LightShadowPro
           smallStep={0.000001}
           largeStep={0.0001}
           displayPrecision={0.000001}
-          value={lightComponent.shadowBias}
-          onChange={updateProperty(props.comp, 'shadowBias')}
-          onRelease={commitProperty(props.comp, 'shadowBias')}
+          value={lightComponent.shadowBias.value}
+          onChange={updateProperty(props.component, 'shadowBias')}
+          onRelease={commitProperty(props.component, 'shadowBias')}
         />
       </InputGroup>
       <InputGroup name="Shadow Radius" label={t('editor:properties.directionalLight.lbl-shadowRadius')}>
@@ -76,9 +79,9 @@ export const LightShadowProperties: EditorComponentType = (props: LightShadowPro
           smallStep={0.1}
           largeStep={1}
           displayPrecision={0.0001}
-          value={lightComponent.shadowRadius}
-          onChange={updateProperty(props.comp, 'shadowRadius')}
-          onRelease={commitProperty(props.comp, 'shadowRadius')}
+          value={lightComponent.shadowRadius.value}
+          onChange={updateProperty(props.component, 'shadowRadius')}
+          onRelease={commitProperty(props.component, 'shadowRadius')}
         />
       </InputGroup>
     </>
diff --git a/packages/ui/src/components/editor/properties/light/spot/index.tsx b/packages/ui/src/components/editor/properties/light/spot/index.tsx
index 74d386be4b..fc3da123e7 100644
--- a/packages/ui/src/components/editor/properties/light/spot/index.tsx
+++ b/packages/ui/src/components/editor/properties/light/spot/index.tsx
@@ -47,7 +47,7 @@ import LightShadowProperties from '../shadowProperties'
 export const SpotLightNodeEditor: EditorComponentType = (props) => {
   const { t } = useTranslation()
 
-  const lightComponent = useComponent(props.entity, SpotLightComponent).value
+  const lightComponent = useComponent(props.entity, SpotLightComponent)
 
   return (
     <NodeEditor
@@ -57,7 +57,7 @@ export const SpotLightNodeEditor: EditorComponentType = (props) => {
       icon={<LuCircleDot />}
     >
       <InputGroup name="Color" label={t('editor:properties.spotLight.lbl-color')}>
-        <ColorInput value={lightComponent.color} onChange={updateProperty(SpotLightComponent, 'color')} />
+        <ColorInput value={lightComponent.color.value} onChange={updateProperty(SpotLightComponent, 'color')} />
       </InputGroup>
       <InputGroup name="Intensity" label={t('editor:properties.spotLight.lbl-intensity')}>
         <NumericInput
@@ -65,7 +65,7 @@ export const SpotLightNodeEditor: EditorComponentType = (props) => {
           smallStep={0.001}
           mediumStep={0.01}
           largeStep={0.1}
-          value={lightComponent.intensity}
+          value={lightComponent.intensity.value}
           onChange={updateProperty(SpotLightComponent, 'intensity')}
           onRelease={commitProperty(SpotLightComponent, 'intensity')}
         />
@@ -76,7 +76,7 @@ export const SpotLightNodeEditor: EditorComponentType = (props) => {
           max={1}
           smallStep={0.01}
           mediumStep={0.1}
-          value={lightComponent.penumbra}
+          value={lightComponent.penumbra.value}
           onChange={updateProperty(SpotLightComponent, 'penumbra')}
           onRelease={commitProperty(SpotLightComponent, 'penumbra')}
         />
@@ -88,7 +88,7 @@ export const SpotLightNodeEditor: EditorComponentType = (props) => {
           smallStep={0.1}
           mediumStep={1}
           largeStep={10}
-          value={_Math.radToDeg(lightComponent.angle)}
+          value={_Math.radToDeg(lightComponent.angle.value)}
           onChange={(value) => updateProperty(SpotLightComponent, 'angle')(_Math.degToRad(value))}
           onRelease={(value) => commitProperty(SpotLightComponent, 'angle')(_Math.degToRad(value))}
           unit="°"
@@ -100,7 +100,7 @@ export const SpotLightNodeEditor: EditorComponentType = (props) => {
           smallStep={0.1}
           mediumStep={1}
           largeStep={10}
-          value={lightComponent.range}
+          value={lightComponent.range.value}
           onChange={updateProperty(SpotLightComponent, 'range')}
           onRelease={commitProperty(SpotLightComponent, 'range')}
           unit="m"
@@ -112,7 +112,7 @@ export const SpotLightNodeEditor: EditorComponentType = (props) => {
           max={10}
           smallStep={0.1}
           mediumStep={1}
-          value={lightComponent.decay}
+          value={lightComponent.decay.value}
           onChange={updateProperty(SpotLightComponent, 'decay')}
           onRelease={commitProperty(SpotLightComponent, 'decay')}
         />