I am rendereing a map of components, and for each one, I am using a key/bind function that should work only for this component. Howevever, I am using reagent to render them in a React Swipeable, so they are all mounted together, but one-by-one is shown. What is a way of only using the on-keyboard-on! and on-keyboard-off! accordingly? So my components are different fields, but when it is bool-field, I am using keyboard-listener. The thing is, it at first gets the correct index, then it renders the one with the wrong index, like in page 6

(defn bool-field [{:keys [field-id input-data]}]
  (let [text-val (r/atom (:value (get input-data (keyword field-id))))
        visible? (r/atom false)]

    (fn [{:keys [field-id form-messages  on-submit regenerate-display-fields
                 field  index  theme-data current-page input-data]}]
      (if (= @current-page index)
        (keyboard-listener-on! {:text-val text-val
                                :true-letter (lower-case (first (:yes_button_text form-messages)))
                                :false-letter (lower-case (first (:no_button_text form-messages)))
                                :input-data input-data :field-id field-id
                                :current-page current-page :index index
                                :regenerate-display-fields regenerate-display-fields :on-submit on-submit})
        (keyboard-listener-off! {:true-letter (lower-case (first (:yes_button_text form-messages)))
                                 :false-letter (lower-case (first (:no_button_text form-messages)))}))

      [v-box
       :width "100%"
       :align :center
       :justify :center
       :children [[:div
                   [boolean-fields-area {:form-messages form-messages :text-val text-val :theme-data theme-data :field field
                                         :input-data input-data :field-id field-id :current-page current-page :index index
                                         :regenerate-display-fields regenerate-display-fields :on-submit on-submit}]
                   [:div {:class (warning-notification {:width "327px"})}
                    (calc-error-message {:type "boolean" :field field :form-messages form-messages})]]]])))