React Hooks Put Request?

Hey guys, switching old code over to React Hooks and having an issue on the PUT request. Here is the old code that worked when editing:

  editArt = async (id, title, year, medium, url) => {
    const artBody = {
      title: title,
      year: year,
      medium: medium,
      poster: url
    }

    let newList = this.state.artList.slice()
    let indexToEdit = newList.findIndex(art => art.id === +id)
  
    let response = await fetch(`${API}/mysite/${id}`, {
      method: "PUT",
      mode: "cors",
      body: JSON.stringify(artBody),
      headers: {
        "Accept": "application/JSON",
        "Content-Type": "application/json",
        "token": this.state.token
      },
    })
    if (response.status !== 200) {
      alert(`Couldn't edit this masterpiece.`)
    }
    newList.splice(indexToEdit, 1, {id, ...artBody})
    this.setState({
      artList: newList
    })
  }

However, when I switched it over to use Hooks logic, it now edits the index before it? Any idea??

const editArt = async (id, title, year, medium, url) => {
    const artBody = {
      title: title,
      year: year,
      medium: medium,
      poster: url
    }

    let newList = artList.slice()
    let indexToEdit = newList.findIndex(art => art.id === +id)
  
    let response = await fetch(`${API}/mysite/${id}`, {
      method: "PUT",
      mode: "cors",
      body: JSON.stringify(artBody),
      headers: {
        "Accept": "application/JSON",
        "Content-Type": "application/json",
        "token": token
      },
    })
    if (response.status !== 200) {
      alert(`Unable to edit this masterpiece!`)
    } else {
      alert(`Edited this masterpiece!`)
    }
    newList.splice(indexToEdit, 1, {id, ...artBody})
    setArtList(newList)
  }

It’s recommend to fetch data and all that stuffs through useEffect hook. Learn more about it here https://reactjs.org/docs/hooks-effect.html

I am when I formally get the list, however, I’m not sure what parameter to put in that it relies on in the square brackets.