Complex nested mobx observable map state management architecture

Question

I have the following UI for a react based imaginary app frontend. "Product" view is rendered based on the selected product from the "Select product dropdown" as per the image below.

State management is based on Mobx. Current architecture consists of a "ShopStore" domain store and "Product" domain objects with one-to-many relationship.

Product component has a number of inputs that update a Product object state. This is how it's coded currently:

class ShopStore {
  products: ObservableMap<Product['id'], Product> = observable.map();
  selectedProduct: Product['id'] | null = null;

  setSelectedProduct(id: string) {
    if (this.products.has(id)) {
      this.selectedProduct = id;
    }
  }

  get currentProduct() {
    if (this.selectedProduct) {
      return this.products.get(this.selectedProduct);
    }
    return null;
  }
}

class Product {
  id: string;
  name: string;
}

Is this approach the most efficient one? What other options of having a reference to a currently selected Product in state you can think of? I just have an inner itch there's something off with this.