I have this simple typescript code for react

type fruitCode = 'apple' | 'banana'

interface fruitList {
  name: fruitCode
}

const [arr, setArr] = useState<fruitList[] | []>([])

useEffect(() => {
  const arrList = [{
    name: 'apple'
  }, {
    name: 'banana'
  }];

  //error?
  setArr(arrList)
}, [])

demo