{/* <div>
            {!patientOffice.isFetchingSymptoms ? (
              <div>
                <h1>What are your symptoms?</h1>
                {patientOffice.symptoms.map(symptom => (
                  <div>
                    <label htmlFor={symptom.pk}>{symptom.name}</label>
                    <input
                      type="checkbox"
                      name={symptom.pk}
                      id=""
                      value={symptom.pk}
                      onClick={e => {
                        e.target.checked
                          ? addSymptom([...symptomId, symptom.pk])
                          : addSymptom(
                              symptomId.filter(symptomChecked => {
                                console.log(symptomChecked);
                                console.log(e.target.name);
                                return (
                                  symptomChecked.toString() !==
                                  e.target.name.toString()
                                );
                              })
                            );
                      }}
                    />
                  </div>
                ))}
                <button onClick={() => setStep(2)}>NEXT STEP</button>
              </div>
            ) : (
              "LOADING"
            )}
          </div> */}