ReactJS: CSS3 Custom CheckBox значения основаны на данных бэкэнда

Question

Здесь установлен пользовательский флажок reactJS компонент,

import * as React from "react";
import styled from "../../styled-components";
import { Field } from "react-final-form";

interface Props<FieldValue = string, T extends HTMLElement = HTMLElement> {
  label: string;
  name: string;
  value?: FieldValue;
}

const Wrapper = styled.label`
  display: flex;
  ...

  input {
    position: absolute;
    ...
  }

  input[type="checkbox"]:checked + span:after {
    content: "";
    display: block;
    ...
  }

  input[type="checkbox"]:focus + span {
    ...
  }
`;

const Tickmark = styled.span`
  ...
`;

function Checkbox<FieldValue = string>({
  label,
  name,
  value
}: Props<FieldValue>) {
  return (
    <Wrapper>
      <Field<FieldValue>
        name={name}
        value={value}
        component="input"
        type="checkbox"
      />
      <Tickmark />
      {label}
    </Wrapper>
  );
}

export default Checkbox;

Несколько флажков отображаются с помощью приведенного ниже фрагмента кода в другом компоненте реакции.

            data.records.map((record, i) => (
                <Checkbox
                  name="records"
                  label={record.label}
                  key={record.id}
                  value={record.id}
                />
            )) 

OnSubmit, все флажки / значения сохраняются в бэкэнде, а затем снова при повторном посещении той же страницы, он должен быть извлечен из бэкэнда и должен быть заполнен (проверено).

Я добавил «проверенные» реквизиты в флажок, по умолчанию он отмечен (- флажок) и не могу снять его.

Как установить / установить флажки на основе значений из Backend? Мне интересно, что для достижения этой цели необходимо следовать передовым методам.

Заранее спасибо за помощь.