Dynamic change fillPatternImage

Question

How to dynamically change fillPatternImage? I have an array of objects and they have a texture property, which contains the path to the picture.And through another function I will change this path, how to make fillPatternImage understand the path to the picture.

I tried to do it via useState, but it doesn't work. Example object

  const [textureMain, setTextureMain] = useState(null)
  const [texture] = useImage(textureMain);

{
      points: [
        105, 5,
        205, 30,
        205, heightCloset - 30,
        105, heightCloset - 5], fill: colorMain, texture:texture, type: 'line', changeType: 'left', colorType: 'main'
    },






{
              mainBackRectangles.map((item) => {
                if (item?.type === 'line') {
                  console.log(item?.texture)
                  return <Line
                    points={item.points}
                    closed={true}
                    tension={item.tension}
                    fill={item?.texture ? null :item.fill}
                    stroke={'black'}
                    fillPatternImage={item?.texture && item?.texture}
                    draggable={true}
                  />
                } else {
                  return <Rect
                    width={item.width}
                    height={item.height}
                    fill={item?.texture ? null :item.fill}
                    listening={false}
                    x={item.x}
                    y={item.y}
                    stroke="black"
                    strokeWidth={1}
                    fillPatternImage={item?.texture && item?.texture}
                    className={style.rect}
                  />

                }

              })
            }