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.

EDIT: Thanks to Aravind Reddy for pointing out that the fullscreen prop is only available in v5.

According to this documentation https://react-bootstrap.github.io/components/modal/ you can include a size of 'sm' | 'lg' | 'xl' as a prop for Modal. There is also a fullscreen property that accepts 'true' |'sm-down' | 'md-down' | 'lg-down' | 'xl-down' | 'xxl-down'.

Example of using size

  const [smShow, setSmShow] = useState(false);
  const [lgShow, setLgShow] = useState(false);

  return (
    <>
      <Button onClick={() => setSmShow(true)}>Small modal</Button>{' '}
      <Button onClick={() => setLgShow(true)}>Large modal</Button>
      <Modal
        size="sm"
        show={smShow}
        onHide={() => setSmShow(false)}
        aria-labelledby="example-modal-sizes-title-sm"
      >
        <Modal.Header closeButton>
          <Modal.Title id="example-modal-sizes-title-sm">
            Small Modal
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>...</Modal.Body>
      </Modal>
      <Modal
        size="lg"
        show={lgShow}
        onHide={() => setLgShow(false)}
        aria-labelledby="example-modal-sizes-title-lg"
      >
        <Modal.Header closeButton>
          <Modal.Title id="example-modal-sizes-title-lg">
            Large Modal
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>...</Modal.Body>
      </Modal>
    </>
  );
}

render(<Example />);

And the example of fullscreen

  const values = [true, 'sm-down', 'md-down', 'lg-down', 'xl-down', 'xxl-down'];
  const [fullscreen, setFullscreen] = useState(true);
  const [show, setShow] = useState(false);

  function handleShow(breakpoint) {
    setFullscreen(breakpoint);
    setShow(true);
  }

  return (
    <>
      {values.map((v, idx) => (
        <Button key={idx} className="me-2" onClick={() => handleShow(v)}>
          Full screen
          {typeof v === 'string' && `below ${v.split('-')[0]}`}
        </Button>
      ))}
      <Modal show={show} fullscreen={fullscreen} onHide={() => setShow(false)}>
        <Modal.Header closeButton>
          <Modal.Title>Modal</Modal.Title>
        </Modal.Header>
        <Modal.Body>Modal body content</Modal.Body>
      </Modal>
    </>
  );
}

render(<Example />);