How to include a search field on the posts page?

[monicavasco]

I'm trying to put a search field on my blog page, however, the following error keeps appearing:

  28:29  error    React Hook "useState" is called in function "blogList" which is neither a React function component or a custom React   
Hook function  react-hooks/rules-of-hooks

  const { data } = props

  const allPosts = data.posts
  const emptyQuery = ""

  const [state, setState] = useState({
    filteredData: [],
    query: emptyQuery,
  })

  const handleInputChange = event => {
    console.log(event.target.value)
    const query = event.target.value
    const { data } = props

    const posts = data.posts || []
    const filteredData = posts.filter(post => {
    
      const { body, title, category } = posts.node
      return (
        body.toLowerCase().includes(query.toLowerCase()) ||
        title.toLowerCase().includes(query.toLowerCase()) ||
        (category &&
          category
            .join("")
            .toLowerCase()
            .includes(query.toLowerCase()))
      )
    })
    setState({
      query,
      filteredData,
    })
  }
  const { filteredData, query } = state
  const hasSearchResults = filteredData && query !== emptyQuery
  const posts = hasSearchResults ? filteredData : allPosts

return (
   <S.BlogListWrapper>
          <S.InputSearch
            type="text"
            aria-label="Search"
            placeholder="Procurar artigos..."
            onChange={handleInputChange}
          />

          {data.posts.edges.map(({ node }) => {
            return <BlogCard key={node.id} blog={node} />
          })}
          
        </S.BlogListWrapper>
)

Can you tell me where I'm going wrong?

[ascorbic]

Hi. Could you share the whole source file?