Реагировать на расщепление кода. Страница не отображается

Question

Я использовал расщепление кода с помощью React Lazy. Ошибки не отображаются, но страница не отображается. Следующий код находится внутри index.js Что я делаю не так?

import React from "react";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import {Suspence,lazy} from 'react';


// Imported Pages
const HomePage = lazy(() => import("./components/home_page/index"));
const MoviePage = lazy(() => import("./components/movie_page/index"));

const App = () =>(
  <Router>
    <Suspence falback ={<div>Loading...</div>}>
    <Switch>
      <Route exact path="/" component={HomePage} />
      <Route exact path="/movie_page" component={MoviePage}/>
    </Switch>
    </Suspence>
  </Router>,

  document.getElementById("root")
);

serviceWorker.unregister();

export default App