User should not be able to enter next field without filling the previous fields

I have this react bootstrap form consisting of several input fields. This form consists of like 20 or 30 fields so I am not sharing entire code because it would be probably a mess. I am using react functional component with stlyed-components. User should not be able to enter next field without filling the previous fields. How can I achieve this functionality? This is my functional component. Help would be really appreciated, Thanks in advance. `

  <div>
    <MainContainer>
      <FormContainer>
        <Form>
          <MainRow>
            <MainCol xxl={4}>
              <Form.Group
                as={MainRow}
                className="mb-3"
                controlId="formHorizontalEmail"
              >
                <MainCol xxl={6}>
                  <Form.Label>
                    <span>C</span>ode:
                  </Form.Label>
                </MainCol>
                <MainCol xxl={6}>
                  <Form.Control
                    type="number"
                    disabled
                  />
                </MainCol>
              </Form.Group>
            </MainCol>
          </MainRow>

          <MainRow>
            <MainCol xxl={4}>
              <Form.Group
                as={MainRow}
                className="mb-3"
                controlId="formHorizontalEmail"
              >
                <MainCol xxl={6}>
                  <Form.Label>
                    <span>N</span>ame:
                  </Form.Label>
                </MainCol>
                <MainCol xxl={6}>
                  <Form.Control  type="text" />
                </MainCol>
              </Form.Group>
            </MainCol>

            <MainCol xxl={4}>
              <Form.Group
                as={MainRow}
                className="mb-3"
                controlId="formHorizontalEmail"
              >
                <MainCol xxl={4}>
                  <Form.Label>
                    Last <span>N</span>ame:
                  </Form.Label>
                </MainCol>
                <MainCol xxl={8}>
                  <Form.Control onKeyDown={handleEnter} type="text" />
                </MainCol>
              </Form.Group>
            </MainCol>
          </MainRow>

          <MainRow>
            <MainCol xxl={8}>
              <Form.Group
                as={MainRow}
                className="mb-3"
                controlId="formHorizontalEmail"
              >
                <MainCol xxl={3}>
                  <Form.Label>
                    Contact <span>P</span>erson:
                  </Form.Label>
                </MainCol>
                <MainCol xxl={9}>
                  <Form.Control onKeyDown={handleEnter} type="text" />
                </MainCol>
              </Form.Group>
            </MainCol>
          </MainRow>

          <MainRow>
            <MainCol xxl={8}>
              <Form.Group
                as={MainRow}
                className="mb-3"
                controlId="formHorizontalEmail"
              >
                <MainCol xxl={3}>
                  <Form.Label>
                    <span>A</span>ddess:
                  </Form.Label>
                </MainCol>
                <MainCol xxl={9}>
                  <Form.Control onKeyDown={handleEnter} type="text" />
                </MainCol>
              </Form.Group>
            </MainCol>
          </MainRow>

          <MainRow>
            <MainCol xxl={8}>
              <Form.Group
                as={MainRow}
                className="mb-3"
                controlId="formHorizontalEmail"
              >
                <MainCol xxl={3}>
                  <Form.Label>
                    <span>A</span>ddress:
                  </Form.Label>
                </MainCol>
                <MainCol xxl={9}>
                  <Form.Control onKeyDown={handleEnter} type="text" />
                </MainCol>
              </Form.Group>
            </MainCol>
          </MainRow>

          <MainRow>
            <MainCol xxl={4}>
              <Form.Group
                as={MainRow}
                className="mb-3"
                controlId="formHorizontalEmail"
              >
                <MainCol xxl={6}>
                  <Form.Label>
                    <span>C</span>ity:
                  </Form.Label>
                </MainCol>
                <MainCol xxl={6}>
                  <Form.Select
                    onKeyDown={handleEnter}
                    aria-label="Default select example"
                  >
                    <option value="default" hidden></option>
                    <option value="1">Islamabad</option>
                    <option value="2">Y</option>
                    <option value="3">Z</option>
                  </Form.Select>
                </MainCol>
              </Form.Group>
            </MainCol>

            <MainCol xxl={4}>
              <Form.Group
                as={MainRow}
                className="mb-3"
                controlId="formHorizontalEmail"
              >
                <MainCol xxl={4}>
                  <Form.Label>
                    <span>C</span>ountry:
                  </Form.Label>
                </MainCol>
                <MainCol xxl={8}>
                  <Form.Select
                    onKeyDown={handleEnter}
                    aria-label="Default select example"
                  >
                    <option value="default" hidden></option>
                    <option value="1">Pakistan</option>
                    <option value="2">Y</option>
                    <option value="3">Z</option>
                  </Form.Select>
                </MainCol>
              </Form.Group>
            </MainCol>
          </MainRow>

          <MainRow>
            <MainCol xxl={8}>
              <Form.Group
                as={MainRow}
                className="mb-3"
                controlId="formHorizontalEmail"
              >
                <MainCol xxl={3}>
                  <Form.Label>
                    <span>P</span>hone:
                  </Form.Label>
                </MainCol>
                <MainCol xxl={9}>
                  <Form.Control onKeyDown={handleEnter} type="number" />
                </MainCol>
              </Form.Group>
            </MainCol>
          </MainRow>

          
        </Form>
      </FormContainer>
    </MainContainer>
  </div>
</>

`