ここでReactフックを間違って使用しているのはどうしてですか？

ヘルシンキ大学のFullstackOpenコースに合わせて簡単な電話帳を作成しています。以下のコードのログは、「filterBy」状態が常にレンダリングビハインドであり、contacts.filterから「contact.name.toUpperCase」が関数ではないというエラーが発生していることを示しています。だから私は2つの質問があると思います。

1. クラスコンポーネントを使用せずに、彼らが私にやらせようとしていることを実行することもできますか？彼らはまだコースでそれらを紹介していないので、私はそうだと思います。しかし、状態を同期させる必要がある場合（たとえば、入力を使用して画面に表示されるオブジェクトの配列をフィルタリングする場合）にクラスコンポーネントを使用する必要があることをチュートリアルで聞いたことがあります。しかし、filterBy状態を実際にフィルター入力の内容と同期させることはできません。

2. 「constcontactsToShow ...」で始まる行を知っています。機能しているとしても、おそらくそれを行うには最適な方法ではありません。これをどのように行うのが最善ですか？

コード：

import React, { useState } from 'react'
import Contact from './components/Contact'

const App = () => {
  const [contacts, setContacts] = useState([
    { name:'Guy Fieri', number: '020-4837473'},
    { name:'Gordon Ramsay', number: '75749483832'},
    { name:'Mr. Tasty', number: '43-4982839'},
    { name:'Dude man', number: '11-33-448382'},
  ]) 
  const [newName, setNewName] = useState('')
  const [newNumber, setNewNumber] = useState('')
  const [showAll, setShowAll] = useState(true)
  const [filterBy, setFilterBy] = useState('');

  const contactsToShow = showAll ? contacts : contacts.filter(contact => contact.name.toUpperCase().search(filterBy) !== -1)


  const rows = () => contactsToShow.map(contact =>
    <Contact
      key={contact.name}
      name={contact.name}
      number={contact.number}
    />
  )
  
  const handleContactNameChange = (event) => {
    console.log(event.target.value)
    setNewName(event.target.value)
  }

  const handleContactNumberChange = (event) => {
    console.log(event.target.value)
    setNewNumber(event.target.value)
    console.log(newNumber);
  }

  const handleFiltering = (event) => {
    console.log(event.target.value)
    setFilterBy(event.target.value)
    setShowAll(false)
    console.log(filterBy);
  }

  const addContact = (event) => {
    event.preventDefault()
    // 
    if(newName === '') return true
    if(newNumber === '') return true

    let dup = false
    contacts.forEach(contact => {
      if (contact.name === newName) dup = true
    })

    if (!dup) {
      const contactObject = {
        name: newName,
        number: newNumber
      }
  
      setContacts(contacts.concat(contactObject))
      setNewName('')
      setNewNumber('')
    }
  }

  return (
    <div>
      <h1>Phonebook</h1>
      <form onSubmit={addContact}>
      <div>
        Filter:<input value={filterBy} onChange={handleFiltering}/>
      </div>
        Name: <input
          value={newName} 
          onChange={handleContactNameChange}
        /><br/>
        Number: <input
          value={newNumber} 
          onChange={handleContactNumberChange}
        /><br/>
        <button type="submit">save</button>
      </form>
      <ul>
        {rows()}
      </ul>
    </div>
  )
}

export default App 

何を試すことができますか？私はこのように反応するのはとても初めてです。