在处理诺言时设定状态？

Question

我一直在阅读有关此问题的堆栈溢出，并努力解决我的问题。我仍然很初中，所以我可能已经阅读了正确的修复程序，并且很密集地理解它。

该意图是从API查询中为返回对象设置的一个反应状态。

话虽如此，这是代码。编辑：修复了props

export const Background = ({background, setBackground}) => {
  //goal is to query a random land and set the background to the full art of that land on page load
  const backgroundQuery = async () => { 
    const query = "https://api.scryfall.com/cards/random?q=%28type%3Aland%29+is%3Aartcrop"
    const response = await fetch(query);
    console.log(response)
    const data = await response.json();
    console.log(data);
    setBackground(data);
  }

  return(
    <div>
      {background.length && <image src={background.image_uris.art_crop} alt="background image, basic full art mtg land"></image>}
      <button onClick={backgroundQuery}> Get Image </button>
    </div>
  )
};

console.log（数据）产生我想要的结果，但我知道我错误地解决了这一诺言。产生的错误如下：

Uncaught (in promise) TypeError: setBackground is not a function
    at backgroundQuery (Background.js:9:1)