I am new in React and struggling a bit. I have two similar components, where I am dealing with scrolling backwards when modal is open on IOS. I have solved the problem this way:

    const handleShow = () => {
    if (disabled) return;
    setShow(true);
    document.body.style.top = `-${window.scrollY}px`
    document.body.style.position = 'fixed'
  };
  
    const handleClose = () => {
    resetForm();
    setShow(false);
     
    const scrollY = document.body.style.top
     document.body.style.position = ''
     document.body.style.top = '' 
     window.scrollTo(0, parseInt(scrollY || '0') * -1)
  };
  

and then applying it to the modal in return.

Second component is written differently and I don't really know how to apply the same functionality.

const AddPaymentModal = ({ show, onHide}) => {

**some other functions**
return (
    <Modal show={show} onHide={onHide}>
       **Some other code**
      <button onClick={onHide} className="btn modal-payment-footer-btn">{t('Close')}</button>
    </Modal>

  );
};

What would be the best way to apply those two functions?

Thank you