Как удалить элемент из массива, используя localStorage.removeItem?

Я использую localStorage.setItem и localStorage.getItem для хранения данных (устройства, в моем случае) из API для сохранения после перезагрузки страницы. Когда на устройство нажимают, оно сохраняется в сумке для покупок. Когда пользователь щелкает устройство в сумке, я хочу, чтобы оно могло «удалить» и быть удаленным из локального хранилища. Сейчас он работает так, что в пользовательском интерфейсе он показывает, что его удаляют, но когда страница обновляется, он возвращается, потому что он все еще находится в localStorage.

Я пытался использовать localStorage.removeItem(deviceTitle) в своей функции removeDevice, но, похоже, ничего не происходит. Это потому, что у меня есть localStorage.getItem в componentDidMount? Если так, как мне изменить это, чтобы функция removeItem работала?

addDevice() вызывается во время с помощью функции onClick (пожалуйста, дайте мне знать, если вам нужно увидеть эту часть кода)

  addDevice = (e, deviceTitle) => {
    const array = Array.from(this.state.bag);
    if (array.indexOf(deviceTitle) === -1) {
      array.push(deviceTitle);
    } else {
      return;
    }
    localStorage.setItem("list", JSON.stringify(array));
    this.setState({
      bag: array
    });
  };

Здесь, где устройство должно быть удалено из локального хранилища

removeDevice = (e, deviceTitle) => {
    this.setState(prevState => ({
      bag: prevState.bag.filter(d => d !== deviceTitle)
    }));
    localStorage.removeItem(deviceTitle);
  };

И это мой componentDidMount (), где хранятся устройства

componentDidMount() {
    this.search("");
    const storedList = JSON.parse(localStorage.getItem("list"));
    console.log(storedList);
    const bag = storedList;
    this.setState({ bag });
  }

РЕДАКТИРОВАТЬ больше кода, добавленного ниже:

  render() {
    return (
      <div>
        <form>
          <input
            type="text"
            placeholder="Search for devices..."
            onChange={this.onChange}
          />
          {this.state.devices.map(device => (
            <ul key={device.title}>
              <p>
                {device.title}{" "}
                <i
                  className="fas fa-plus"
                  style={{ cursor: "pointer", color: "green" }}
                  onClick={e => this.addDevice(e, device.title)}
                />
              </p>
            </ul>
          ))}
        </form>
        {this.state.bag.map(device => (
          <p key={device.title}>
            {device}
            <i
              className="fas fa-times"
              style={{ cursor: "pointer", color: "red" }}
              onClick={e => this.removeDevice(e, device)}
            />
          </p>
        ))}
        <button onClick={e => this.removeAll(e)}>Remove all</button>
      </div>
    );
  }
}

Вот скриншоты того, как это выглядит: элементы в локальном хранилище, элементы после удаления в пользовательском интерфейсе но когда я перезагружаю страницу, она возвращается к первому изображению, потому что устройства не были удалены из localStorage