react-web-ar - Rendering component containing AFrameRenderer gives Uncaught Error

Question

I have two components Home.js and View.js. My View.js returns a JSX with AframeRenderer tag. I want to render the View.js component whenever user clicks the Click Me option in the Home.js component.

Below is the snapshot of the codes from App.js, Home.js and View.js

The code gives error whenever the website tries to open localhost:3000/view page

The error says as follows:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of View.

App.js:

import Home from './Home/Home'
import View from './View/View'

class App extends Component {
        render() {
                return(
                        <BrowserRouter>
                                <div className = "App">
                                        <Switch>
                                                <Route path = '/' exact component = {Home} />
                                                <Route path = '/view' exact component = {View} />
                                        </Switch>
                                </div>
                        
                        </BrowserRouter>
        );
    }
}

export default App;

Home.js:

import View from '../View/View'

class Home extends Component{
        render() {
                return (
                        <Link to =  { {
                                pathname: '/view/'
                          } } >
                            Click Me
                        </Link>
                );
        }
}
export default Home;

View.js:

class View extends Component {
        render() {
                return (
                        <AFrameRenderer arToolKit = {{sourceType: 'webcam'} } >
                                <Marker parameters = {{ preset : 'hiro'}} >
                                        <a-box color="blue" material = "opacity: 1;"position="0 0.9 0" scale="0.4 0.8 0.8">
                                                <a-animation attribute="rotation" to="360 0 0" dur="5000" easing="linear" repeat = "indefinite" />
                                        </a-box>
                                </Marker>
                        </AFrameRenderer>
                );
        }
}

export default View;