React Function Component unused variable error

While trying to put the component below into a router I get the following error:

WARNING in src\App.js
Line 3:8: ‘errorScreen’ is defined but never used no-unused-vars

const errorScreen = () => {
    const homeRedirect = () => {
        window.location.assign('/')
    }

    return (
        <div className='successMessage'>
            <h2> Error! </h2>
            <h3>
                Please try again on a computer or laptop.{' '}
                <a href='/' onClick={homeRedirect}>
                    Back to Portfolio
                </a>
            </h3>
        </div>
    )
}

export default errorScreen

My code in App.js

import HomeScreen from './screens/HomeScreen'
import FormScreen from './screens/FormScreen'
import errorScreen from './screens/errorScreen'
import { Route } from 'react-router'
import { BrowserRouter as Router, Routes } from 'react-router-dom'

function App() {
    return (
        <Router>
            <Routes>
                <Route path='/' element={<HomeScreen />} />
                <Route path='/error' element={<errorScreen />} />
                <Route path='/form' element={<FormScreen />} />
            </Routes>
        </Router>
    )
}

export default App

The other components work just fine

>Solution :

Problem is with your naming of component, component name must start with capital letter. All React component names must start with a capital letter. If you start a component name with a lowercase letter, it will be treated like a built-in element like a <div> or a <span>, meaning in your case <errorScreen /> is not referencing errorScreen from import, as you were thinking, but rather treating it as some buil-in element tag. Just rename component name from errorScreen to ErrorScreen and update route with new name.