Objetos não são validos como

console log error message: Uncaught Error: Objects are not valid as a React child (found: object with keys {nome, id, src}). If you meant to render a collection of children, use an array instead.

code:

import Input from "../Input";
import styled from "styled-components";
import { useState } from "react";
import { books } from "./searchData";

const SearchContainer = 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 Search() {
  const [searchedBooks, setSearchedBooks] = useState([]);
  console.log(searchedBooks);

  return (
    <SearchContainer>
      <Title>Já sabe por onde começar?</Title>
      <SubTitle>Encontre seu livro em nossa estante.</SubTitle>
      <Input
        placeholder="Escreva sua proxima leitura"
        onBlur={event => {
          const typedText = event.target.value
          const searchResult = books.filter( book => book.name.includes(typedText) )
          setSearchedBooks(searchResult)
        }}
      />
      <p>{books}</p>
    </SearchContainer>
  );
}

export default Search;