Bom dia a todos. Quando rodo o sistema me traz erro na importação.
import Input from "../Input";
import styled from "styled-components";
import { useState } from "react";
import { livros } from "./dadosPesquisa";
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 Titulo = styled.h2`
  color: #fff;
  font-size: 36px;
  text-align: center;
  width: 100%;
`;
const SubTitulo = styled.h3`
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 40px;
`;
function Pesquisa() {
    const [livrosPesquisados, setLivrosPesquisados] = useState([]);
    console.log(livrosPesquisados);
  return (
    <PesquisaContainer>
      <Titulo> Já sabe por onde começar?</Titulo>
      <SubTitulo>Encontre seu livro em nossa estante</SubTitulo>
      <Input
        placeholder="Escreva sua próxima leitura"
        onBlur={ evento => {
          const textoDigitado = evento.target.value
          const resultadoPesquisa = livros.filter(livro => livro.nome.include(textoDigitado))
          setLivrosPesquisados(resultadoPesquisa);
        }}
      />
    </PesquisaContainer>
  );
}
export default Pesquisa;
import livro from '../../imagens/livro.png'
export const livros = [
    {nome: 'Liderança em Design', id: 1, src: livro},
    {nome: 'JavaScript Assertivo', id: 2, src:livro},
    {nome: 'Cangaceiro em JavaScript', id: 3, src:livro},
    {nome: 'Aventureiros do Java', id: 4, src:livro},
]
 
             
            
 
  