UseEffect вызывается дважды. Как починить?

упс, не дочитал решение

UseEffect вызывается дважды. Как починить?

App.js

import React, { useEffect, useState } from 'react';
import axios from 'axios'
import './index.css'
import Home from './pages/Home'
import options from './api/api'

function App() {


  
  const [tracks, setTracks] = useState([]);

  const track = tracks[Math.floor(Math.random() * tracks.length)];

  useEffect(() => {

    axios.request(options).then((response) => {
      setTracks(response.data.tracks)
    });

  }, []);

  console.log(track)


  return (
    <>
      <Home track={track} />
    </>
  )
}

export default App

Home.jsx

import React from 'react'
import Header from '../components/Header'
import Sidebar from '../components/Sidebar/Sidebar'


const Home = ({track}) => {

  return (
    <div className="w-screen h-screen relative">
      <div className="absolute artist" />
      <Header/>
      <Sidebar/>
      <div className="absolute left-[300px] w-[160px] h-[340px] flex flex-col items-center text-white">
        <p className="text-base">P</p>
        <h2>{track.name}</h2>
      </div>
    </div>
  )
}

export default Home

UseEffect вызывается дважды. Как починить?

Через App передал в Home track, и указал в h2 {track.name}
Страница после перезагрузки выдает ошибки, потому что сначала {track.name} равен undefined, а дальше уже не идет

UseEffect вызывается дважды. Как починить?

Спасибо, попробую.

UseEffect вызывается дважды. Как починить?

Написал что выключен...