[Bug] Erro que não entendo ocorre no mue código, alguém consegue me ajudar?

import styled from "styled-components"
import Input from '../input/index.jsx'
import { useState } from "react"
import { livro } from '../pesquisa/dadosPesquisa/index.jsx'

const PesquisaContainer = styled.section `
        background-image: linear-gradient(90deg, #002F52 35%, #326589 165%);
        color: #FFF;
        text-align: center;
        padding: 85px 0;
        height: 270px;
        width: 100%;
    


`
const Title = styled.h2`


        color: #FFF;
        font-size: 36px;
        text-align: center;
        width: 100%;


`
const SubTitle = styled.h3`
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 40px;


`

function Pesquisa(){
            //Criando lista com os livros:
            const [livroPesquisa, setLivroPesquisa] = useState([])

    return(
        <PesquisaContainer>
        <Title>Já sabe por onde começar?</Title>
        <SubTitle>Encontre seu livro em nossa instante</SubTitle>
        <Input placeholder="O que você quer ler?" type="text"
        onBlur={evento => {
                const textoDigitado = evento.target.value;
                const resultadoPesquisa = livro.filter(livro=> livro.nome.includes(textoDigitado))
                setLivroPesquisa(resultadoPesquisa)
                //Com o estado "setLivrosPesquisa" definido com o resultado, assim, mem mostra o resultado da pesquisa.
        }}
    {livroPesquisa.map(livro => (
            <div>
                <p>{livro.nome}</p>
                <img src={livro.src} alt='imagem do livro'/>
            </div>
        ) ) }
        
        ></Input>
        </PesquisaContainer>
    )
}

export default Pesquisa

Caso ajude a me ajudar, aqui os dadosPesquisa:

import styled from "styled-components"
import Input from '../input/index.jsx'
import { useState } from "react"
import { livro } from '../pesquisa/dadosPesquisa/index.jsx'

const PesquisaContainer = styled.section `
        background-image: linear-gradient(90deg, #002F52 35%, #326589 165%);
        color: #FFF;
        text-align: center;
        padding: 85px 0;
        height: 270px;
        width: 100%;


`
const Title = styled.h2`


        color: #FFF;
        font-size: 36px;
        text-align: center;
        width: 100%;


`
const SubTitle = styled.h3`
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 40px;


`

function Pesquisa(){
            //Criando lista com os livros:
            const [livroPesquisa, setLivroPesquisa] = useState([])

    return(
        <PesquisaContainer>
        <Title>Já sabe por onde começar?</Title>
        <SubTitle>Encontre seu livro em nossa instante</SubTitle>
        <Input placeholder="O que você quer ler?" type="text"
        onBlur={evento => {
                const textoDigitado = evento.target.value;
                const resultadoPesquisa = livro.filter(livro=> livro.nome.includes(textoDigitado))
                setLivroPesquisa(resultadoPesquisa)
                //Com o estado "setLivrosPesquisa" definido com o resultado, assim, mem mostra o resultado da pesquisa.
        }}
    {livroPesquisa.map(livro => (
            <div>
                <p>{livro.nome}</p>
                <img src={livro.src} alt='imagem do livro'/>
            </div>
        ) ) }
        
        ></Input>
        </PesquisaContainer>
    )
}

export default Pesquisa