Losing reactivity in props passed to `children` callback

export function Field(props: { form: Form; children: JSXElement }) { // `Form` is a SolidJS store
  const fieldState = createMemo(() => {
    return {
      value: store.value,
      isDisabled: store.isDisabled,
      isRequired: store.isRequired,
      hasError: store.hasError,
    };
  });

  createEffect(() => console.log('Changed', fieldState()); // Is logging successfully on changes

  return props.children(fieldState());
}

// ---------------------------
<Field form={myForm}>
  {(fieldState) => (
    <>
      <p>{JSON.stringify(fieldState)}</p> // !! Not updating on changes
      <CustomInput {...fieldState} /> 
    </>
  )}
</Field>

export function Field(props: { form: Form; children: JSXElement }) {
  const fieldState = {
    value: createMemo(() => store.value),
    isDisabled: createMemo(() => store.isDisabled),
    ...
  };

  return props.children(fieldState);
}

// ---------------------------
<Field form={myForm}>
  {(fieldState) => (
    <>
      <p>{JSON.stringify(fieldState)}</p> // Updating correctly now
      <CustomInput value={fieldState.value()} isDisabled={fieldState.isDisabled()} ... /> 
    </>
  )}
</Field>