What is the correct way to map and print unique dataset objects in React?

I’m trying to create a filter section for my Side Nav where I can toggle each <li>on or off to show comics of that title only. Currently I am having issues with correctly looping my dataset in order to grab unique name values and printing those as an <li>.

What I’ve tried so far is mapping the PRODUCTS object, grabbing each name value and storing it in an array, looping through that array length with a seperate index value, and then returning that name value if it meets this condition (arr[i] !== arr[j]).

For example my PRODUCTS dataset might contain 15 different products or objects, 5 named Alita Battle Angel, 5 named Wolverine, and 5 named Spiderman.

expected output:
console.log this

(1) Array=[1:'Alita Battle Angel', 2:'Wolverine', 3:'Spiderman'] 

return this

<li> Alita Battle Angel</li>
<li> Wolverine </li>
<li> Spiderman </li>

actual output:
console.log this

(15) Array=[ 1:'Alita Battle Angel', 2:'Alita Battle Angel', 3:'Alita Battle Angel', 4:'Alita Battle Angel', 5:'Alita Battle Angel', 6:'Wolverine', 7:'Wolverine', 8:'Wolverine', 9:'Wolverine', 10:'Wolverine', 11:'Spiderman', 12:'Spiderman', 13:'Spiderman', 14:'Spiderman', 15:'Spiderman' ]

return this

<li>Alita Battle Angel</li>

This is my code: (I am also splitting the name value of each so that it returns only the characters before the ‘,’ to make sure that each comic title is entirely unique. Example: “Alita battle Angel, Vol. 1” —> “Alita Battle Angel”)

import React from "react";
import { PRODUCTS } from "../Utilities/PRODUCTS";
import "./SideNav.scss";

const SideNav = (props) => {
    let arr = [];
    return (
        <div className="sideNav-container">
            <div className="sideNav-title"></div>
            <ul>
                {PRODUCTS.map((product) => {
                    // map the PRODUCTS data

                    // loop products data while carrying a singular products 'name'
                    for (let i = 0; Object.keys(PRODUCTS).length > i; i++) {
                        // add that name value to array list
                        arr.push(product.name.split(",", 1));
                        console.log("products length: " + Object.keys(PRODUCTS).length);

                        // if array greater than 1 item
                        if (arr.length > 1) {
                            console.log(arr);
                            // loop the length of that array
                            for (let j = 0; j < arr.length; j++) {
                                // if array[j] not equal to previous array item return name
                                if (arr[i] !== arr[j]) {
                                    let title = `${product.name}`.split(",", 1);
                                    return <li key={[product.id]}>{title}</li>;
                                } else return null;
                            }
                        }
                    }
                })}
            </ul>
        </div>
    );
};

export default SideNav;

The issue is that my code is injecting the entire dataset as a single object. Basically returning my dataset 15 times as a single array. I don’t get why it is doing this.

I know using the filter method might be a possible solution and also using the useState hook from react. I’ve tried both of these but was received some sort of error specific to my file setup.

Any suggestions for solution would be appreciated.