I have exported properly but still getting error for 1 component ReactJs

App.js Component

import React from 'react';
import StartPage from "./StartPage";
import LoginPage from "./LoginPage";
import SignUp from "./SignUp";
import Route from "./Route";

const App = () => {

    const onClickStart = () => {
        window.location.pathname = "/signup";
    }
    console.log(window.location.pathname);

    return (
        <div>

            <Route path="/">
                <StartPage onClickStart={onClickStart}/>
            </Route>

            <Route path="/signup">
                <SignUp />
            </Route>

            <Route path="/login">
                <LoginPage />
            </Route>
        </div>
    );
};

export default App;

LoginPage & StartPage are working perfectly but there's an error in SignUp page.

Error

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 SignUp.

SignUp component

import React, { useRef } from 'react';
import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
import Form from 'react-bootstrap/Form';
import BackgroundImage from "../img/background.png";

const SignUp = () => {
    const emailRef = useRef();
    const passwordRef = useRef();
    const passwordConfirmRef = useRef();

    return (
        <div class="bg_image"
        style={{
          backgroundImage: 'url('+BackgroundImage+')',
          backgroundPosition: 'center',
          backgroundSize: 'cover',
          backgroundRepeat: 'no-repeat',
          width: '100vw',
          margin: '0px',
          padding: '0px',
          height: '100vh'}}>
              <Card>
                  <Card.body>
                      <h2 className = "text-center mb-4">Signup</h2>
                      <Form>
                          <Form.group id="email">
                            <Form.label>Email</Form.label>
                            <Form.Control type="email" ref={emailRef} required />
                          </Form.group>

                          <Form.group id="password">
                            <Form.label>Password</Form.label>
                            <Form.Control type="password" ref={passwordRef} required />
                          </Form.group>

                          <Form.group id="password-confirm">
                            <Form.label>Password Confirmation</Form.label>
                            <Form.Control type="password" ref={passwordConfirmRef} required />
                          </Form.group>
                      </Form>

                      <Button className="w-100" type="submit">Signup</Button>
                  </Card.body>
              </Card>
              <div className = "w-100 text-center mt-2">
                  Already have an account? Login
              </div>
        </div>
    );
};

export default SignUp;