Symbols not populating references inside of them even If I use enrich, noTraverse and includeRefs

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link
Footer Symbol: Builder.io: Visual Development Platform

Builder public api key
f127073fccdc44a590bf4362d8bb100b

Detailed steps to reproduce the bug
Basically I have a Footer which is a custom component that I converted into a Symbol so I can use it across different pages, it all worked great until I had to add a list of references to Card Icons (it’s a data model called asset that has a text field for a name and a file field for the icon image). Here’s an image of how it is shown in the visual editor:


And this is the part of the code I use to create that custom field when I registered the custom component (notice how I even try to set enrich and includeRefs there just to see if that would help):

Builder.registerComponent(Footer, {
  name: 'Footer',
  inputs: [
    {
      name: 'headingTag',
      type: 'string',
      defaultValue: 'h3',
      regex: {
        pattern: 'h[1-6]',
        message: 'Heading tag must be an h1, h2, h3, h4, h5, or h6',
      },
    },
    { name: 'showForm', type: 'boolean', defaultValue: true },
    {
      name: 'heroArtwork',
      friendlyName: 'Cellphone Artwork',
      type: 'file',
      allowedFileTypes: ['png', 'jpg', 'jpeg', 'svg'],
      required: true,
    },
    {
      name: 'cardIcons',
      type: 'list',
      required: false,
      defaultValue: [],
      subFields: [
        {
          name: 'cardIcon',
          type: 'reference',
          required: true,
          model: 'asset',
          options: {
            enrich: true,
            includeRefs: true,
          },
        },
      ],
    },
  ],
  noWrap: true,
})

The problem is that I’m using <BuilderComponent/> to render my whole homepage (and the rest of the pages I’ve created in builder visual editor) and when I use the Symbol in one of my pages I get an error of “Cannot read properties of undefined…” due to cardIcons not including the values (here’s an image using react devtools to show how data comes to the footer used in my homepage):


Notice how I only get the reference id and model but not the values.
Here’s how I use the Builder component in case I’m missing something:

<BuilderComponent
        model="page"
        options={{
          enrich: true,
          includeRefs: true,
          noTraverse: false,
          includeUnpublished: isDevEnv,
          cachebust: isDevEnv,
          cache: !isDevEnv,
        }}
        data={{
          archiveUrl: `/${finalArchiveUrl}/`,
        }}
      />

One important detail I have to mention is that I can fetch the data through graphql using enrich true and pass that data to the BuilderComponent through the content prop which is recommended and fix the issue, but gives me a huge amount of hydration errors with all the components (even the defaults that are from builder itself like the text component). This hydration errors are related with how builder apply binded styles (I have a data model with color values that I use in text components using the binding system), builder applies those binded styles through inline styles causing hydrations error messages like “Warning: Prop style did not match. Server: “null” Client: “color:rgba(35, 44, 51, 1)”” and since I don’t have a way to tell builder to not apply those values inline I can’t fix it. That’s why I can’t use the content prop approach

Code stack you are integrating Builder with
React and Gatsby