Error in test files: It should match the snapshot Objects are not valid as a React child

Question

I am running into this same error across 7 different test files in our React App. This started to happen after I went through entire app to upgrade a library.

it should match the snapshot

    Objects are not valid as a React child 
(found: object with keys {id, label, subtext, value, checked}). 
If you meant to render a collection of children, use an array instead.

I think if I can figure out how to re-render the snapshot files this may or may not solve my problem.

I did try the following solution:

npm install jest -g
jest --updateSnapshot

^^ That did not work at all and ended up with errors in every single test file

I also went through the list of answers on this page (but none are in relation to this type of error and didn't work) = STACKOVERFLOW_ANSWERS

Here is my code: FiberReportForm.test.tsx

import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { IFiberDetailsLocation } from '../../../../types/types.generated';

import FiberReportForm from './FiberReportForm';

const testData = {
  id: '6e81a4d4-596e-4146-a9ff-819eb9e9157d',
  address: {
    friendlyName: 'Pfannerstill Gateway',
    street: '213 Winfield Walk',
    city: 'Lake Vivianshire',
    state: 'MA',
  },
  circuit: {
    id: '56..T12227.VA.TWCC',
    bandwidth: '10 Mbps',
  },
};

describe('FiberReportForm Component', () => {
  test('it should match the snapshot', () => {
    const { asFragment } = render(
      <FiberReportForm
        data={testData as unknown as IFiberDetailsLocation}
        onSubmit={(formData) => console.log(formData)}
      />
    );
    expect(asFragment()).toMatchSnapshot();
  });
});

FiberReportForm.test.tsx.snap

// Jest Snapshot v1

exports[`FiberReportForm Component it should match the snapshot 1`] = `
<DocumentFragment>
  <div
    class="report-form"
  >
    <div
      class="report-form__upper"
    >
      <h1>
        Create Fiber Report
      </h1>
      <span>
        Please select the data you want in your report.
      </span>
    </div>
    <div
      class="kite-card report-form__card"
    >
      <h2>
        1. Location
      </h2>
      <div
        class="report-form__card-content"
      >
        <dl>
          <dt
            class="report-form__card-content-label"
          >
            Location Name:
          </dt>
          <dd>
            Pfannerstill Gateway
          </dd>
        </dl>
        <dl>
          <dt
            class="report-form__card-content-label"
          >
            Address:
          </dt>
          <dd>
            213 Winfield Walk, Lake Vivianshire, MA
          </dd>
        </dl>
        <dl>
          <dt
            class="report-form__card-content-label"
          >
            Circuit ID:
          </dt>
          <dd>
            56..T12227.VA.TWCC
          </dd>
        </dl>
      </div>
    </div>
    <div
      class="kite-card report-form__card"
    >
      <h2>
        2. Time Increment
      </h2>
      <div
        class="report-form__card-content"
      >
        <div
          aria-labelledby="timeSelect"
          class="kite-radio kite-form-group "
          role="group"
        >
          <div
            class="kite-radio__button-container"
          >
            <label
              class="kite-custom-control kite-custom-radio kite-radio__button"
              for="day"
            >
              <input
                aria-checked="true"
                checked=""
                class="kite-custom-control-input"
                id="day"
                name="timeSelect"
                tabindex="0"
                type="radio"
                value="day"
              />
              <div
                class="kite-custom-control-indicator"
              />
              <span
                class="kite-custom-control-description"
              >
                Day
                <p
                  aria-hidden="true"
                  class="kite-radio__subtext"
                >
                  Data is available for the past 365 days.
                </p>
              </span>
            </label>
            <label
              class="kite-custom-control kite-custom-radio kite-radio__button"
              for="hour"
            >
              <input
                aria-checked="false"
                class="kite-custom-control-input"
                id="hour"
                name="timeSelect"
                tabindex="-1"
                type="radio"
                value="hour"
              />
              <div
                class="kite-custom-control-indicator"
              />
              <span
                class="kite-custom-control-description"
              >
                Hour
                <p
                  aria-hidden="true"
                  class="kite-radio__subtext"
                >
                  Data is available for the past 90 days. Maximum date range is 31 days.
                </p>
              </span>
            </label>
            <label
              class="kite-custom-control kite-custom-radio kite-radio__button"
              for="fifteen"
            >
              <input
                aria-checked="false"
                class="kite-custom-control-input"
                id="fifteen"
                name="timeSelect"
                tabindex="-1"
                type="radio"
                value="fifteen"
              />
              <div
                class="kite-custom-control-indicator"
              />
              <span
                class="kite-custom-control-description"
              >
                15 Minutes
                <p
                  aria-hidden="true"
                  class="kite-radio__subtext"
                >
                  Data is available for the past 31 days. Maximum date range is 31 days.
                </p>
              </span>
            </label>
          </div>
        </div>
      </div>
      <span
        class="report-form__card-footer"
      >
        Times in UTC timezone
      </span>
    </div>
    <div
      class="kite-card report-form__card"
    >
      <h2>
        3. Date Range
      </h2>
      <div
        class="report-form__card-content--column"
      >
        <div
          class="report-form__card-content--daterange"
        >
          <div
            class="rkp-date-range rkp-date-range--with-label rkp-date-range--with-options"
          >
            <span
              class="rkp-date-range__label"
            >
              Date Range
            </span>
            <div
              class="rkp-date-range__toggle"
            >
              <button
                class="rkp-date-range__toggle-button"
              >
                <span
                  class="kite-icon "
                  style="height: 18px; width: 18px;"
                >
                  <svg
                    aria-hidden="true"
                    aria-label=""
                    class="ki icon-calendar "
                    role=""
                    style="height: 100%; width: 100%; background-color: transparent;"
                  >
                    <use
                      xlink:href="/assets/kite-icons.svg#ki-calendar"
                    />
                  </svg>
                </span>
              </button>
              <div
                class="rkp-date-range__toggle-date-container"
              >
                <input
                  class="rkp-date-range__toggle-date"
                  id="startDisplay"
                  max="2022-03-17"
                  min="2021-03-17"
                  step="1"
                  type="date"
                  value="2022-03-11"
                />
                <span>
                  -
                </span>
                <input
                  class="rkp-date-range__toggle-date"
                  id="endDisplay"
                  max="2022-03-17"
                  min="2022-03-11"
                  step="1"
                  type="date"
                  value="2022-03-17"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="report-form__submit-container"
    >
      <button
        class="kite-btn  kite-btn-lg"
        style="display: flex;"
        type="button"
      >
        <span
          class="kite-btn__content kite-btn-outline-primary"
          tabindex="-1"
        >
          Cancel
        </span>
      </button>
      <button
        class="kite-btn  kite-btn-lg"
        style="display: flex;"
        type="submit"
      >
        <span
          class="kite-btn__content kite-btn-primary"
          tabindex="-1"
        >
          Submit
        </span>
      </button>
    </div>
  </div>
</DocumentFragment>
`;