How to pass props to context reactively?

type FormGroupProps = { hasError?: boolean, name: string, children: JSXElement };

type FormGroupContextValue = { hasError: boolean, name: string };
const FormGroupContext = createContext<FormGroupContextValue>({
  hasError: false, name: ''
});

export function FormGroup(props: FormGroupProps) {
  return (
    <FormGroupContext.Provider
      value={{ hasError: Boolean(props.hasError), name: props.name }}
    >
      {props.children}
    </FormGroupContext.Provider>
  );
}

export function useFormGroup() {
  return useContext(FormGroupContext);
}

export function TestComponent() {
  const group = useFormGroup();
  return (
    <pre>
      Has error: {group.hasError}
      Name: {group.name}
    </pre>
  )
}

// Usage
const [errorA, setErrorA] = createSignal(false);

return <>
  <FormGroup name="a" hasError={errorA()}>
    <TestComponent />
  </FormGroup>
  <button onClick={() => setErrorA(err => !err)}>Toggle error</button>
</>

type FormGroupProps = { hasError?: boolean, name: string, children: JSXElement };

type FormGroupContextValue = { hasError: boolean, name: string };
const FormGroupContext = createContext<FormGroupContextValue>({
  hasError: false, name: ''
});

export function FormGroup(props: FormGroupProps) {
  return (
    <FormGroupContext.Provider
      value={{ hasError: Boolean(props.hasError), name: props.name }}
    >
      {props.children}
    </FormGroupContext.Provider>
  );
}

export function useFormGroup() {
  return useContext(FormGroupContext);
}

export function TestComponent() {
  const group = useFormGroup();
  return (
    <pre>
      Has error: {group.hasError}
      Name: {group.name}
    </pre>
  )
}

// Usage
const [errorA, setErrorA] = createSignal(false);

return <>
  <FormGroup name="a" hasError={errorA()}>
    <TestComponent />
  </FormGroup>
  <button onClick={() => setErrorA(err => !err)}>Toggle error</button>
</>