diff --git a/src/content/Components/MagicBento/MagicBento.vue b/src/content/Components/MagicBento/MagicBento.vue
index 3281abe..17be7cb 100644
--- a/src/content/Components/MagicBento/MagicBento.vue
+++ b/src/content/Components/MagicBento/MagicBento.vue
@@ -378,7 +378,7 @@ const ParticleCard = defineComponent({
 const GlobalSpotlight = defineComponent({
   name: 'GlobalSpotlight',
   props: {
-    gridRef: { type: Object as PropType<HTMLDivElement | null>, required: true },
+    gridRef: {type: [Object, null] as PropType<HTMLDivElement | null>, required: true},
     disableAnimations: { type: Boolean, default: false },
     enabled: { type: Boolean, default: true },
     spotlightRadius: { type: Number, default: DEFAULT_SPOTLIGHT_RADIUS },
@@ -539,7 +539,10 @@ const GlobalSpotlight = defineComponent({
 const BentoCardGrid = defineComponent({
   name: 'BentoCardGrid',
   props: {
-    gridRef: { type: Object }
+    gridRef: {
+      type: Function as PropType<(el: HTMLDivElement | null) => void>,
+      required: true
+    }
   },
   template: `
     <div