onScroll when at the bottom of the div then disable button

Trying to achieve something similar to popular T&C's actions, when you scroll down to the very bottom of the div 'accept' button becomes enabled so you can click on it.

For this example, I am using material-UI components & button becomes disabled when I add 'disabled' within the component, that's all.

Here's the code:

import React from 'react';
import PropTypes from 'prop-types';
import Modal from '@material-ui/core/Modal';
import Button from '@material-ui/core/Button';
import './terms-popup.scss';

const handleScroll = (e) => {
    const bottom = e.target.scrollHeight - e.target.scrollTop === e.target.clientHeight;
    if (bottom) { console.log('bottom is reached'); }
};

const TermsPopup= ({
    isModalOpen,
    isOpen,
    title,
    closeLabel,
    showCloseButton,
}) => {
    return (
        <Modal
            aria-labelledby="simple-modal-title"
            aria-describedby="simple-modal-description"
            open={isOpen}
            onClose={() => isModalOpen(false)}
        >
            <div className="terms-container">
                <div className="terms-header">
                    <h2>{title}</h2>
                </div>
                <div
                    className="terms-body"
                    onScroll={handleScroll}
                >
                    <h3>Sample title</h3>
                    <p>Sample description would go here</p>
                <div className="terms-footer">
                    {(showCloseButton) ? (
                        <Button
                            variant="contained"
                            type="button"
                            onClick={() => isModalOpen(false)}
                        >
                            {closeLabel}
                        </Button>
                    ) : null}
                </div>
            </div>
        </Modal>
    );
};

TermsPopup.propTypes = {
    isModalOpen: PropTypes.func.isRequired,
    isOpen: PropTypes.bool.isRequired,
    title: PropTypes.string.isRequired,
    closeLabel: PropTypes.string,
    showCloseButton: PropTypes.bool,
};

TermsPopup.defaultProps = {
    closeLabel: 'accept',
    showCloseButton: true,
};

export default TermsPopup;

And what I'd like to achieve is when the bottom is reached then Button should change to:

<Button
variant="contained"
type="button"
onClick={() => isModalOpen(false)}
disabled
/>