How to load Image or svg src through react map from states?

https://codesandbox.io/s/load-svg-from-import-via-states-6ycf4q

I am trying to load svg icons in map from state objects but the state is not loading in img src. please help

   {Tabs.map((obj, i) => (
                  <Card className="">
                    <Card.Body>
                      <i className={obj.icon}></i>
                      <img src={obj.iconsvg} />
                      <Card.Title>{obj.tabtitle}</Card.Title>
                      <Card.Link
                        key={i}
                        onClick={() => setActive(obj.tabname)}
                        className="tab"
                      >
                        Click to see more <img src={linkarrow} />
                      </Card.Link>
                    </Card.Body>
                  </Card>
                ))}

>Solution :

Since you import your icons as

import cardicon1 from "./cardicon1.svg";

you must reference this at your iconsvg property

  {
    tabname: "tab2",
    tabtitle: "Chart Color Pale111ttes",
    icon: "fas fa-palette",
    iconsvg: cardicon1
  },

Check this sandbox