只显示那些不在另一个数组中的元素

I have an array of fruits and users can select fruits and user-selected fruits will be added in another state array called user_fruits. If a user selects the fruit then that fruit will no longer be available as an option.

fruits = ['apple', 'mango', 'watermelon', 'jackfruite', 'guava', 'berry']
state = {
  user_fruits: []
}

addFruitToTheList = () => {
  //This function adds fruits to the user_fruite array
}

deleteFruitsList = () => {
  // This function deletes the fruits from the user_fruit array
}

render() {
  return (
    <div>
        {/*here I want to render only those that are in the user list*/}
        {this.state.user_fruits.map((key, id) => {
          return <li>
            {key}<button onClick={this.removeTheFruiteFromUserList}>X</button>
          </li>
        })}

        {/*but I want to render only those that are not in the user list*/}
        {this.fruits.map((key, id) => {
          return <button onClick={this.addFruitToTheList} key={id} value={key}>{key}</button>   
        })}
    </div>
  )
}

How can I show only those fruits that are not in the user_fruits array, then if I delete those fruits then it will show again.