Display Info Window on the multiple coordinates on the arcgis map in Next JS

I think that in your code you are having a context problem with the variable i. When the popup shows the value of i always gonna be vehicleData.length.

So you can solve the context problem using let instead of var, but I will suggest you another approach.

Declare template, the popup template, outside the loop, and use two new properties that we will add in the next step.

var template = new PopupTemplate({
    title: "{company}",
    content: "{description}"
    outFields: ["*"],
    fieldInfos: [
        { fieldName: "company" },
        { fieldName: "description" }
    ]
});

Add the information you want to display, to the attributes of the graphics, like this,

var graphic_symbol = new Graphic({
    geometry: point_symbol,
    symbol: {
        type: "simple-marker",
        style: "circle",
        color: "orange",
        size: "18px",
        outline: {
            color: [150, 200, 255],
            width: 5
        } 
    },
    popupTemplate: template,
    attributes: {  // <- here
        company: vehicleData[i].company,
        description: vehicleData[i].description
    }
});

Finally, let the click event search for the graphic, like this,

map.on("click", function(event) {
    map.popup.open({
        location: event.mapPoint,
        fetchFeatures: true
    });
});

BTW, I just keep the last step because you change default on purpose, I am not seeing the reason here but you must have one.