React chakra ui - checkbox table

Question

i'm wonder why it doesn't work. I mean as you can see initialFormValues have some permission on true, some on false, but after first render check boxes do not change, remain unchecked. I tried several different approaches, all unsuccessful I will be grateful for your help. import { Box, Table, Thead, Tbody, Tr, Th, Td, Checkbox, Button, Container, } from '@chakra-ui/react'; import { Field, Formik, Form } from 'formik'; import { RolesEnum } from '@/enums/roles.enums';

const initialFormValues = {
  [RolesEnum.PATIENT]: {
    permission1: false,
    permission2: true,
    permission3: false,
    permission4: true,
  },
  [RolesEnum.DOCTOR]: {
    permission1: false,
    permission2: true,
    permission3: false,
    permission4: true,
  },
  [RolesEnum.ADMIN]: {
    permission1: false,
    permission2: true,
    permission3: false,
    permission4: true,
  },
  [RolesEnum.ORGANIZATION_ADMIN]: {
    permission1: false,
    permission2: true,
    permission3: false,
    permission4: true,
  },
  [RolesEnum.SUPER_ADMIN]: {
    permission1: false,
    permission2: true,
    permission3: false,
    permission4: true,
  },
  [RolesEnum.RECEPTIONIST]: {
    permission1: false,
    permission2: true,
    permission3: false,
    permission4: true,
  },
};

export const PermissionTable = () => {
  const handleSubmit = (values: any) => {
    console.log(values);
  };

  const tableColumns = ['Roles', 'Permission 1', 'Permission 2', 'Permission 3', 'Permission 4'];

  return (
    <Formik initialValues={initialFormValues} onSubmit={handleSubmit} enableReinitialize>
      <Form>
        <Box width="100%">
          <Table>
            <Thead>
              <Tr>
                {tableColumns.map((column) => (
                  <Th key={column}>{column}</Th>
                ))}
              </Tr>
            </Thead>
            <Tbody>
              {Object.keys(RolesEnum).map((role) => (
                <Tr key={role}>
                  <Td>{RolesEnum[role as keyof typeof RolesEnum]}</Td>
                  {Object.keys(initialFormValues[RolesEnum[role as keyof typeof RolesEnum]]).map(
                    (permission) => (
                      <Td key={permission}>
                        <Field name={`${role}.${permission}`}>
                          {({ field }: any) => <Checkbox {...field} colorScheme="teal" size="lg" />}
                        </Field>
                      </Td>
                    ),
                  )}
                </Tr>
              ))}
            </Tbody>
          </Table>
          <Container centerContent pt={4}>
            <Button maxW="max-content" type="submit">
              Submit
            </Button>
          </Container>
        </Box>
      </Form>
    </Formik>
  );
};