Change background of SVG image

Question

I am trying to change the background image of my svg when a user selects a different images, the images are put into an array and passed into the react component and then updates the image with the background image, this will add the first image but it add the second image, presumably the code i'm using to target #img2 in the svg is incorrect or I have incorrect code in the svg to use for multiple background images

svg.find('image').attr("href", this.props.pattern[0]); this works svg.find('pattern').find('#img2').find('image').attr("href", this.props.pattern[1]); this does not work

How can I target fill="url(#img2) with my second image in the array?

array of data

{ https://example.com/image1},
{ https://example.com/image2} 

react component

   class InlineSVG extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      image: '',
    };
  }
  componentDidMount() {
    this.loadSVG();
  }
  componentDidUpdate(prevProps) {
    prevProps.src !== this.props.src && this.loadSVG()
    if (this.state.image && prevProps.pattern !== this.props.pattern) {
      this.updateColors()
    }
  }

  setImage = (image) => {
    this.setState({
      ...this.state,
      image,
    });
  }

  loadSVG() {
      fetch(this.props.src)
        .then(
          response => {
            if (!response.ok) return Promise.reject(new Error('Server Error'));
            return response.text();
          }
        ).then(
          svg => this.setState({ image:  svg})
        )
  }

  updateColors() {
    const svg = $(this.state.image);
    if (svg) {
      svg.find('image').attr("href", this.props.pattern[0]);
      svg.find('pattern').find('#img2').find('image').attr("href", this.props.pattern[1]);


      this.setImage(svg.prop('outerHTML') || $('<div>').append($(svg).clone()).html());
    }

  }

svg

<defs>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%">
    <image id="bg" href="" x="0" y="0" width="100%" height="100%" />
  </pattern>
  <pattern id="img2" patternUnits="userSpaceOnUse" width="100%" height="100%">
    <image id="bg" href="" x="0" y="0" width="100%" height="100%" />
  </pattern>
</defs>
<path id="cloth-color-2" fill="url(#img2)" d="M179.4,93l-2.6,5.1v0.1l2.7,5.8v0.1l-2.7,5.1v0.1l2.7,5.8v0.1l-2.7,5.2v0.1l2.7,5.7v0.1
    l-2.7,5.2v0.1l2.7,5.8v0.1l-2.7,5.2v0.1l2.7,5.7v0.1l-2.8,5.2v0.1l2.7,5.6c0,0.1,0,0.2-0.1,0.2H2.3c-0.1,0-0.1-0.1-0.1-0.2l2.7-5.6
    v-0.1l-2.7-5.2v-0.1l2.7-5.7v-0.1l-2.7-5.2v-0.1l2.7-5.8v-0.1l-2.7-5.2v-0.1l2.7-5.7v-0.1l-2.7-5.2v-0.1l2.7-5.8v-0.1l-2.7-5.1V104
    l2.7-5.8v-0.1L2.3,93c0-0.1,0-0.2,0.1-0.2h176.9C179.4,92.9,179.4,93,179.4,93z"/>
<path id="cloth-color-1" fill="url(#img1)" d="M176.8,22.4l2.6-5.1c0-0.1,0-0.2-0.1-0.2H2.4c-0.1,0-0.1,0.1-0.1,0.2l2.6,5.1v0.1l-2.7,5.8
    v0.1l2.7,5.2v0.1l-2.7,5.7v0.1l2.7,5.2v0.1l-2.7,5.7v0.1l2.7,5.2v0.1l-2.7,5.8v0.1L4.9,67v0.1l-2.7,5.7v0.1l2.7,5.2v0.1l-2.5,5.3
    c0,0.1,0,0.2,0.1,0.2h176.6c0.1,0,0.1-0.1,0.1-0.2l-2.5-5.3v-0.1l2.7-5.2v-0.1l-2.7-5.7V67l2.7-5.2v-0.1l-2.7-5.8v-0.1l2.7-5.2v-0.1
    l-2.7-5.7v-0.1l2.7-5.2v-0.1l-2.7-5.8v-0.1l2.7-5.1v-0.1l-2.7-5.8C176.8,22.5,176.8,22.5,176.8,22.4z"/>

Answer 1

you can change background color with help CSS.

Frist inspect and find class/id/attribute of that inner component of svg element and then write css property for that.

Answer 2

I have used this code to update the svg image with 2 different backgrounds

svg.find('#img1').find('image').attr("href", this.props.pattern[0]);
svg.find('#img2').find('image').attr("href", this.props.pattern[1]);