Как использовать тот же компонент в реакции js

Question

Я использую функциональный компонент в моем проекте. Я хочу показать один и тот же модал для двух разных нажатий кнопок. У меня есть два нажатия кнопки, один из которых «Добавить Do c» и «Редактировать Do c». Имея шесть полей в моем модале, я хочу отключить два поля нажатием кнопки «Редактировать Do c». Я добавил отключенный в своем коде, но проблема в том, что как только пользователь добавил значение в «Добавить Do c», поля становятся недоступными, если пользователь выбрал неправильное значение, он не может измениться. В моем "Edit Do c" я просто загружаю значения и показываю это. При этом пользователь не может редактировать поля «Do c Type» и «Do c Iussued country». Я хочу, чтобы эти поля были отключены только в «Редактировать Do c». Ниже мой код. Любой может посоветовать мне, как мне этого добиться. Заранее спасибо.

function TravelDoc(props: any) {
  const { modData,  } = props;
  const [documentType, setdocumentType] = useState(!isEmpty(modData) ? modData[0].documentType : '');
  const [dDocIsuContry, setdDocIsuContry] = useState(!isEmpty(modData) ? modData[0].issuedCountryCode : '');
  const { t } = useTranslation();
  let obj: any = [];
  // const dispatch = useDispatch();
  const { dispatch, onHide, countryList } = props;
  const DocHandler = (event: any) => {
    event.preventDefault();
    event.stopPropagation();
    const form = event.currentTarget;
    obj = serialize(form, { hash: true });
    const { documentInformation } = obj;
    const DocumentData = {
      documentInfo: [
        {
          docType: documentInfos.documentType,
          issuedCountryCode: documentInfos.CountryCode,
        },
      ],
    };

    if (form.checkValidity() && (documentInfos.docType !== '0' && documentInfos.docType !== '') && (documentInfos.CountryCode !== '0' && documentInfos.CountryCode !== '')) {

      dispatch(AddDoc(DocumentData)).then((result: any) => {
        if (result.isSuccess) {
          dispatch(getdetails());
          onHide();
        } else {
         ""error
        }
      });
      event.preventDefault(); 
      event.stopPropagation(); 
    }
    setTrvlDocvalidated(true);
  };

  useEffect(() => {
    dispatch(fetchCountry());
  }, []);

  const BindCountryList = (selectedVal: any) => {
    const countryOption: any = [];
    map(countryList, (cList: any) => {
      countryOption.push(<option selected={selectedVal === cList.countryCode} value={cList.countryCode}>{cList.countryName}</option>);
    });
    return countryOption;
  };

  return (
    <Form noValidate validated={trvlDocvalidated} id="DocForm" onSubmit={(ev: any) => DocHandler(ev)}>
      <Row className={styles.labelInline}>
        <Col xs sm="6">
          <Form.Group>
            <Form.Control required as="select" placeholder="Document Type" onChange={(value: any) => { setdocumentType(value.target.value); }} setdocumentType={docType !== '' ? documentType : 1} name="documentType">
              <option>
               DocType
              </option>
              <option value="1">
              License
              </option>
            </Form.Control>
          </Form.Group>
        </Col>
        <Col xs sm="6">
          <Form.Group>
            <Form.Control
              Value={dDocIsuContry}
              autoComplete="off"
              disabled={IsuCountryr}
              as="select"
              required
              name="CountryCode"
              onChange={(ev: any) => {
                setdDocIsuContry(ev.target.value);
              }}
            >
              <option value="">{t('PassengersPP.lblPaxDocIssueCountry')}</option>
              {BindCountryList(dDocIsuContry)}
            </Form.Control>
            <Form.Control type="hidden" defaultValue={dDocIsuContry} name="CountryCode" />
          </Form.Group>
        </Col>
    </Form>
  );
}