diff --git a/src/component/NMRium.tsx b/src/component/NMRium.tsx
index d4811a1de..ca07ad553 100644
--- a/src/component/NMRium.tsx
+++ b/src/component/NMRium.tsx
@@ -203,9 +203,12 @@ export interface NMRiumData {
 }
 
 const defaultPreferences = {};
+const defaultData: NMRiumData = {
+  spectra: [],
+};
 
 function NMRium({
-  data: dataProp,
+  data: dataProp = defaultData,
   mode = NMRiumMode.DEFAULT,
   preferences = defaultPreferences,
   getSpinner = defaultGetSpinner,
diff --git a/src/demo/views/View.jsx b/src/demo/views/View.jsx
index 1f68b5a09..5b6e67d93 100644
--- a/src/demo/views/View.jsx
+++ b/src/demo/views/View.jsx
@@ -30,11 +30,11 @@ export default function View(props) {
         setData(_d);
       });
     } else {
-      setData({});
+      setData(undefined);
     }
   }, [baseURL, file, props]);
 
-  const changeHadnler = useCallback((logData) => {
+  const changeHandler = useCallback((logData) => {
     setCallbackData((prevLogs) => {
       return prevLogs.concat({
         datetime: new Date().toLocaleTimeString(),
@@ -113,7 +113,7 @@ export default function View(props) {
       >
         <div style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
           <div style={{ width: isCallbackVisible ? '75%' : '100%' }}>
-            <NMRium data={data} onDataChange={changeHadnler} />
+            <NMRium data={data} onDataChange={changeHandler} />
           </div>
           {process.env.NODE_ENV !== 'production' && (
             <div