How to seperate item in array using react

user.js

import React, { useState, useEffect } from 'react';
import Axios from 'axios';

const RecommendationDetail = () => {
  const [image, setImage] = useState([]);

  useEffect(() => {
    loadRekko();
}, []);


  const loadRekko = async () => {
    const res = await Axios.get(`http://localhost:3001/dashboard-rekko/${id}`,{
        headers:headers
    }); 


    console.log(res.data.response);
    var array = [];
    let a = (res.data.response.rekkoRecords.product_img)
    array.push(a)
    setImage(array)    ====>>> How can i make array like i want
    console.log(image)
    setRecommendation(res.data.response.rekkoRecords)
  }

 return (
    {image.map((it) => {
            return (
                <div key={it}>
                    <img src= {'http://localhost:3001/'+it} />
                </div>
            )
            
        })}
 )
}

Everything is working but I want to show multiple images. I am getting a response in "uploads\classpamplate.png,uploads\classpamplate1.jpg" this format and after pushing it in the array it becomes ["uploads\classpamplate.png,uploads\classpamplate1.jpg"] but what I want is ["uploads\classpamplate.png","uploads\classpamplate1.jpg"] both are separated so that I can show it using .map() function. Any help will be appreciated