I am trying to implement a strategy game that uses a svg map that I created and I would like to add some attributes like "troops" in each "path"(which would be the territory) and some other props. Is it possible to add att(props) to only a path and then use this component inside a svg tag which is the whole map. So basically I want to know how can I create a territory object with att(props) and an input or label in the map, so later I can add onClick events and other events.

For now I have the component Map and also the Territory component(I am not sure if it's the best way to deal with it.)

const Territory = ({ tD }) => {
  const [color, setColor] = useState('red')
  const [troops, setTroops] = useState(21)

  return (
    <>
      <input type="text" />
      <path fill-rule="evenodd" clip-rule="evenodd" d={tD} fill={color} stroke="black" />
    </>
  );
};

export default Territory;

const Map = () => {
  return (
    <svg width="1397" height="686" viewBox="0 0 1397 686" fill="none" xmlns="http://www.w3.org/2000/svg">
      {territories.map(territory => (
        <Territory key={territory.id} tD={territory.tD} />
      ))}
    </svg>

  );
};

I want to add the troops to be visible(number) in an input or label in the map for each territory. something like this map with inputs

Is it possible to do it? what would be the best approach to build a territory component which has props like "troops"

Thank you so much whoever helps me.