Spreading or mapping an array changes an array inside the attributes

I'm trying to use an array of objects I get from an API to create the arrays of a reactjs app. The only problem I find is that somehow my array of routes gets corrupted when I spread or map it. Here is the code snippet.

const childRoutes = (Layout, routes) => {
    console.log(routes);
    console.log([...routes]);

    return routes.map(({ children, path, component: Component }, index) => {
        return children ? (
            // Route item with children
            children.map(({ path, component: Component }, index) => {
                return (
                    <Route
                        key={index}
                        path={path}
                        exact
                        render={(props) => (
                            <Layout>
                                <Component {...props} />
                            </Layout>
                        )}
                    />
                );
            })
        ) : (
            // Route item without children
            <Route
                key={index}
                path={path}
                exact
                render={(props) => (
                    <Layout>
                        <Component {...props} />
                    </Layout>
                )}
            />
        );
    });
};

All the extra returns are because I was adding extra console.logs. The routes come from another component. Here is the console.logs returned:

As you can see, the children array is emptied when I spread the array. It is also emptied when I try to map it to create the routes.