Save array of objects to javascript localStorage not working

I'm trying to store an array of objects in local storage. I'm using this common method:

localStorage.setItem( 'products', JSON.stringify(this.state.products) );
let initialProducts = JSON.parse(localStorage.getItem("products") || "[]")

I'm getting the error:

SyntaxError: Unexpected token o in JSON at position 1

I know that error means I am parsing the JSON twice, however if I do not parse it, when I get "products" from localStorage it is:

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

What am I doing wrong?

Full code:

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import ProductList from "../products/ProductList";
import productData from "../products/model";

class App extends Component {
  constructor(props) {
    super(props);
    let initialProducts = JSON.parse(localStorage.getItem("products") || "[]")
    console.log(initialProducts);
    this.state = {
      newProductName: "",
      newProductPrice: 0,
      products: initialProducts
    };
  }

  updateNewProductName = event => {
    this.setState({ newProductName: event.target.value });
  };

  updateNewProductPrice = event => {
    this.setState({ newProductPrice: event.target.value });
  };

  addProduct = () => {
    this.state.products.push({
      name: this.state.newProductName,
      price: this.state.newProductPrice
    });
    this.setState({
      products: this.state.products
    });
    localStorage.setItem( 'products', JSON.stringify(this.state.products) );
  };

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <div className="App-header-container">
            <img
              src="https://www.ezyvet.com/wp-content/uploads/2016/04/ezyVet-Logo-22-4.png"
              alt="ezyVet Cloud Veterinary Practice Management Software"
              id="logo"
              className="App-logo"
              data-height-percentage="65"
              data-actual-width="768"
              data-actual-height="252"
            />
          </div>
        </header>
        <div className="App-header-container">
          <ProductList products={this.state.products} />
          <input
            type="text"
            id="uname"
            name="uname"
            required
            minLength="2"
            placeholder="name"
            value={this.state.newProductName}
            onChange={this.updateNewProductName}
          />
          <input
            type="number"
            id="uprice"
            name="uprice"
            required
            placeholder="price"
            value={this.state.newProductPrice}
            onChange={this.updateNewProductPrice}
          />
          <button onClick={this.addProduct}>Add Product</button>
        </div>
      </div>
    );
  }
}

export default App;