प्रॉप्स से यूज़स्टेट को अपडेट करना

अन्य घटकों से प्रॉप्स द्वारा पारित चर का उपयोग करके घटक में चर को अद्यतन करने के लिए एक अच्छा अभ्यास क्या है? यहां मैं विभिन्न घटकों से पारित 'आईडी' के आधार पर छवि प्रदर्शित करने का प्रयास कर रहा हूं जहां मैं क्लिक ईवेंट पर आधारित आईडी पकड़ता हूं। अफसोस की बात है कि मेरा useState घटक 100% में अपडेट नहीं होता है। किसी तरह उचित सूचकांक को सही ढंग से पढ़ना संभव है, लेकिन यह छवि को ठीक से प्रदर्शित नहीं करता है।

const SwiperModal = ({ handleClose, show, membersList, curr_idx }) => {
  const showHideClassName = show ? 'modal display-block' : 'modal display-none';
  const idx = parseInt(curr_idx);
  const [index, setIndex] = useState(idx);

  return (
    <div className={showHideClassName}>
      <section className="modal-main">
        <button className="btn__close" onClick={handleClose}>
          close
        </button>
        <Gallery
          index={index}
          //index variable above is responsible for "which image is displayed from the list"
          onRequestChange={i => {
            setIndex(i);
          }}
        >
          {membersList.map((value, index) => (
            <GalleryImage objectFit="contain" src={value.image} key={index} />
          ))}
        </Gallery>
      </section>
    </div>
  );
};

क्या अन्य घटकों से पारित प्रॉप्स का उपयोग करके इस तरह के चर को अद्यतन करना एक अच्छा तरीका है? या ऐसा करने का कोई अन्य विचार है?