increase or decrease form control irrespective of model width changes

modal with is defined in the css, also form control size Col sm="5" is mentioned in FormControlCompnoent.tsx, whenever i increase or decrease the width in modal-50w (CSS) irrespective of the form control column size defined it automatically raises or reduces the size of form control.

I believe the modal-50w i have defined for the modal alone however form control size also impacts when i do any changes, kindly advise as modal width should increase or decrease without making any changes to control size defined in FormControlCompnoent.tsx.

standAloneModal.scss

.modal-50w {
    width: 50%;
    max-width: none!important;
} 

DisplayComponent.tsx

  <Modal
    show={show}
    onHide={() => setShow(false)}
    backdrop="static"
    dialogClassName="modal-50w"
    centered
    aria-labelledby="example-custom-modal-styling-title"
  >
    <Modal.Header closeButton>
      <Modal.Title id="example-custom-modal-styling-title">
      </Modal.Title>
    </Modal.Header>
    <Modal.Body>

      <FormControlCompnoent closeFunc={handleClose} addOrEdit="add" id={-1} ></FormControlCompnoent >

    </Modal.Body>
  </Modal>

FormControlCompnoent.tsx

 return (

        <Container fluid>

            <Row>

                <Col className="m-1">


                        <h4 className="mb-2" style={{ textAlign: "center" }}>Add Screen</h4>

                    <hr></hr>

                    <Form onSubmit={handleSubmit(onSubmit)} >

                        {isLoading &&
                            <Row>
                                <Col className="p-2">
                                    Loading ... <Spinner animation="border" variant="primary" />
                                </Col>
                            </Row>
                        }

                        <Row>

                            <Col className="border border-3 border-primary p-2">

                                <Form.Group as={Row}>
                                    <Form.Label column sm="2">Country</Form.Label>
                                    <Col sm={5}>
                                        <Form.Control as="select" id="country" name="country" defaultValue="" placeholder="Choose Branch..."
                                            ref={register({
                                                required: { value: true, message: "This field is required!" }
                                            })}
                                        >
                                            <option value=""></option>
                                            {
                                                countryList && countryList.map(country => (<option key={country.id} value={country.name}>{country.name}</option>))
                                            }
                                        </Form.Control>
                                    </Col>
                                    <Col sm={5}>
                                        <div className="text-danger p-1">{errors.country?.message}</div>
                                    </Col>
                                </Form.Group>
                                
                                <Form.Group as={Row} >
                                    <Form.Label column sm="2">State</Form.Label>
                                    <Col sm="5">
                                        <Form.Control type="text" id="state" name="state" placeholder="" required 
                                            ref = {(e)=> { register(e,{
                                                required: { value: true, message: "This field is required!" },
                                                maxLength: { value: 10, message: "Max length is 10 characters!" },
                                            }),stateRef.current = e }

                                        }
                                        />

                                    </Col>
                                    <Col sm="5">
                                        {errors.crdsId &&
                                            <div className="text-danger p-1">{errors.state?.message}</div>
                                        }
                                    </Col>
                                </Form.Group>
                            </row>
                            
                            
                        <Row>
                            <Col className="p-2 mt-2">

                                <Row>
                                    <Col>

                                        <button type="submit" disabled={formState.isSubmitting || isLoading} className="mt-2 btn btn-primary">
                                            {formState.isSubmitting && <span className="spinner-border spinner-border-sm mr-1"></span>}
                                            Submit
                                        </button>

                                        <button type="button" className="mt-2 ml-2 btn btn-danger" onClick={() => props.closeFunc()}>
                                            Close
                                        </button>

                                    </Col>
                                </Row>

                            </Col>
                        </Row>


                    </Form>


                </Col>


            </Row>



        </Container>


    );