How to change path Id in svg file?

I get svg code from sever and I have to change some specific path's Id.

(e.g. In the code below I want to add something to the preProcessor for changing the Id of the path that has been manipulated, to "targetPath" so I can access the path in useEffect hook.)

import React, { useEffect, useState } from 'react';
import SVG from 'react-inlinesvg';

const PaintObject = ({ objectdata, selectedColor }) => {
  const [loaded, setLoaded] = useState(false);
  const [color, setColor] = useState('#fff');

  useEffect(() => {
    if (loaded) {
      const path = document.getElementById('targetPath');
      path
        && path.addEventListener(
          'click',
          () => setColor(selectedColor),
          false,
        );
    }
  }, [loaded, selectedColor]);

  return (
    <SVG
      src={objectdata.image}
      style={{ color }}
      onLoad={() => setLoaded(true)}
      preProcessor={(code) => code.replace('fill="#fff"', 'fill="currentcolor"')}
    />
  );
};
export default PaintObject;