Object properties not carried over between code and ui

Plugin and Widget API Questions
1

Here is my code:
code.js

...
const variableCollection = figma.variables.getLocalVariableCollections();
const variables = figma.variables.getLocalVariables();
...
showUI(
    {
      height: 137,
      width: 240,
    },
    { collections: variableCollection, vars: variables }
  );

ui.js

function Plugin(props: {
  collections: VariableCollection[];
  vars: Variable[];
}) {
...
const collectionComponents = props.collections.map((node) => {
    return <Text>{node.name}</Text>;
  });
...

For some reason, when I send the prop through, some keys gets removed. What is causing this?

Below is an image of how it looks like before and after
image

2

As you can see, all property values, except for id, have not been evaluated and are displayed in the console as (…). Therefore, you need to create a copy of objects with already evaluated values, and only then send this copy to the UI. You can get these values by calling the getters of the required properties.