reactjs - 機能コンポーネントの古い要素をすべて削除する方法

Question

フェッチ後に h1 ですべての古い div を削除する必要があります。

export default function SearchSong() {
    const [topSongs, setTopSongs] = useState([]);
    let inputEl = useRef(null);
    const fetchData = async () => {

更新。これがフェッチです（正しいデータを返します）：

      let sTrack = inputEl.current.value;
        sTrack = sTrack.replace(/ /g,"+");
        try {
          const response = await fetch(
            `http://ws.audioscrobbler.com/2.0/?method=track.search&track=${sTrack}&api_key=a3c9fd095f275f4139c33345e78741ed&format=json`
          );
          const data = await response.json();
          setTopSongs(data);
        } catch (error) {
          console.log(error.message);
        }
      };
  
    return (
      <div>
<div className="inner-input">
        <div className="container">
            <h1 className="search" >Search for song:
            </h1>

入力があります：

            <input ref={inputEl} size="50" type="text"/>
            <button class="btn btn-primary" onClick={fetchData} >Fetch</button>
        </div>
        </div>
        {topSongs?.results?.trackmatches?.track.length &&
          topSongs.results.trackmatches.track.map((datumn) => {
            return (
                <div key={datumn.name}>
                                  <h1 className='heading'>{datumn.name}</h1>
              </div>
            );
          })}
      </div>
    )
  }

useRef を試し、親要素を削除しました