JS

const [quizStartModal, setQuizStartModal] = useState(false);

 const showQuizModal = () => {
    setQuizStartModal(true);
    $('body').addClass('modal-open stop-scrolling');
  };

  const closeQuizModal = () => {
    setQuizStartModal(false);
    $('body').removeClass('modal-open stop-scrolling');
  };

/* ... */

<div
  className={`modal ${quizStartModal ? 'show' : ''}`}
  style={{
    display: quizStartModal ? 'block' : 'none',
    background: 'rgba(0, 0, 0, .8)',
  }}
  id="quizStartModal"
  data-bs-backdrop="static"
  data-bs-keyboard="false"
  tabIndex="-1"
  aria-labelledby="quizStartModalLabel"
  aria-hidden={quizStartModal ? undefined : 'true'}
  aria-modal={quizStartModal ? 'true' : undefined}
  role={quizStartModal ? 'dialog' : undefined}>

CSS

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

The other mentioned solution only works for setting the width.

For editing the height, you need to add your custom css class to the contentClassName attribute.

For Example:

 <Modal contentClassName="modal-height"></Modal>

Css Class:

.modal-height {
  height: 70%;
}

For editing the width you need to add your custom css class to the dialogClassName attribute.

For Example:

 <Modal dialogClassName="modal-width"></Modal>

Css Class:

.modal-width {
  width: 70%;
}

Possible Issues:

Sometimes you will have to use !important to over-ride bootstrap imposed CSS, so experiment with that as well.

Credits: Found the solution here.