Using .map function for two dimensional array - React

I have a two dimensional array like this;

And I need to use a map function to display div elements as many as the length of the array.

I saved the state into localStorage to prevent the data from disappearing after refreshing the page.

const conditions = JSON.parse(localStorage.getItem("condition")).map((condition, index) => {
            return <div key={index} className="card bg-color-primary" style={{ height: "170px", width: "300px", borderColor: "#1E90FF", backgroundColor: "white", borderWidth: "2px" }}>
                    {_.isEmpty(this.state.rule.condition) ?
                        <div className="card-content" style={{ color: "black" }}>
                            <span className="card-title">New Condition</span>
                            <p>Click to edit</p>
                        </div> :
                        <div className="card-content" style={{ color: "black" }}>
                            <span className="card-title">{condition.property}</span>
                            <p>{condition.operator + " " + condition.value}</p>
                        </div>}
                    <div className="card-action">
                        <a href="javascript:;" style={{ color: "red" }}>OR</a>
                        <a href="javascript:;" style={{ color: "black" }}>AND</a>
                        <a onClick={this.handleOpen} style={{ color: "gray", cursor: "pointer" }}>EDIT</a>
                    </div>
                </div>
        });

After this scope of code, it throws an error like;

Uncaught TypeError: localStorage.getItem(...).map is not a function

NOTE: I already have JSON.parse but forgot to add it here so it is not the actual problem. My bad.