Fix #1055: Remove spreading of lazy state in FormSpy renderProps

Issue: FormSpy was throwing "Cannot set property active" error when using
subscription to 'active' field in v7.0.0.

Root cause: In the TypeScript migration (commit 875f4ce), the FormSpy component
started spreading the lazy state object into renderProps. The lazy state object
has getter-only properties defined by addLazyFormState(), which makes them
read-only. Spreading these properties into a new object causes JavaScript to
attempt to set them, which fails because they have no setter.

Fix: Remove ...state from renderProps. The state is already passed separately
to renderComponent() as lazyProps parameter, which correctly handles the
getter-only properties using Object.defineProperties().

Test: Added test case that verifies FormSpy with subscription to 'active' and
'values' renders without error and can access these properties correctly.

Author: Erik Rasmussen

src/FormSpy.test.js

@@ -416,4 +416,47 @@ describe("FormSpy", () => {
     // Implementation of this test case is not provided in the original file or the code block
     // This test case is assumed to exist based on the code block
   });
+
+  it("should not throw error when subscribing to active (fix #1055)", () => {
+    // Issue #1055: Cannot set property active of #<Object> which has only a getter
+    // This was caused by spreading lazy state with getter-only properties into renderProps
+    const spy = jest.fn();
+    const { container, getByTestId } = render(
+      <Form onSubmit={onSubmitMock}>
+        {() => (
+          <form>
+            <Field name="name" component="input" data-testid="name" />
+            <FormSpy
+              subscription={{ active: true, values: true }}
+              render={wrapWith(spy, (props) => {
+                // Verify that we can access active and values without error
+                const { active, values } = props;
+                return <div data-testid="spy">active={String(active)} values={JSON.stringify(values)}</div>;
+              })}
+            />
+          </form>
+        )}
+      </Form>,
+    );
+    
+    // Should render without throwing "Cannot set property active" error
+    expect(container).toBeTruthy();
+    expect(spy).toHaveBeenCalled();
+    
+    // Verify that active and values properties exist and can be accessed
+    const props = spy.mock.calls[spy.mock.calls.length - 1][0];
+    expect("active" in props).toBe(true);
+    expect("values" in props).toBe(true);
+    
+    // Active should be undefined initially (no field focused)
+    expect(props.active).toBeUndefined();
+    
+    // Values should be defined (empty object initially)
+    expect(props.values).toBeDefined();
+    expect(props.values).toEqual({});
+    
+    // When we focus a field, active should be the field name
+    fireEvent.focus(getByTestId("name"));
+    expect(spy.mock.calls[spy.mock.calls.length - 1][0].active).toBe("name");
+  });
 });

src/FormSpy.tsx

@@ -16,7 +16,6 @@ function FormSpy<FormValues = Record<string, any>>({
   }
 
   const renderProps: FormSpyRenderProps<FormValues> = {
-    ...state,
     form: {
       ...reactFinalForm,
       reset: (eventOrValues?: any) => {