Как исправить, компонент не определен в реакции

Я использую 17.0.1 для создания небольшого приложения для реагирования Я продолжаю получать "Компонент" не определен в следующем коде и не могу сказать, почему или где он не определен.

import React, { Component } from 'react';

class Errorboundry extends component{
    constructor(props){
        super(props);
        this.State  = {
            hasError: false
        }
    }

    componentDidCatch(error, info){
        this.setState({ hasError: true })
    }
    
    render(){
        if (this.State.hasError){
            return <h1>There's been a problem loading this page</h1>
        }
        return this.props.children
    }

}
export default Errorboundry;

И следующий код вызывает компонент реакции

import Errorboundry from '../components/Errorboundry';

render(){
    const { graphics, searchfield } = this.state;
    const searchProjectName = graphics.filter(graphic =>{
        return graphic.name.toLowerCase().includes(searchfield.toLowerCase());
    })
    return graphics.length===0 ? <h1>Loading...</h1> :
    (
        <div className='tc'>
          <h1 className='f1'>Portfolio</h1>
          <Searchbox searchChange = {this.onSearchChange} />
          <Scroll>
            <Errorboundry>
                <CardList graphics = {searchProjectName} />
            </Errorboundry>
          </Scroll>
        </div>
    )
    }
}

export default App;

Ниже приводится сообщение об ошибке, которое я получаю, когда пытаюсь запустить его.

Failed to compile.

src/components/Errorboundry.js
  Line 3:28:  'component' is not defined  no-undef

Search for the keywords to learn more about each error.

Любые советы будут оценены