JSFiddle - React, Tailwind, and code Playground

HTML

<pre>
	<code>
[
	{
		id: 1,
		name: 'Box1',
		type: 'Box',
		props: {},
		elements: [
			{
				id: 2,
				name: 'Box2',
				type: 'Box',
				props: {},
				elements: [
					{
						id: 4,
						name: 'Box4',
						type: 'Box',
						props: {},
						elements: [],
					},
				],
			},
			{
				id: 3,
				name: 'Box3',
				type: 'Box',
				props: {},
				elements: [
					{
						id: 5,
						name: 'Box5',
						type: 'Box',
						props: {},
						elements: [],
					},
				],
			},
		],
	}
]
	</code>
</pre>

JavaScript

const components = [
	{
		id: 1,
		name: 'Box1',
		type: 'Box',
		props: {},
		elements: [],
	},
	{
		id: 2,
		name: 'Box2',
		type: 'Box',
		props: {},
		elements: [],
	},
	{
		id: 3,
		name: 'Box3',
		type: 'Box',
		props: {},
		elements: [],
	},
	{
		id: 4,
		name: 'Box4',
		type: 'Box',
		props: {},
		elements: [],
	},
	{
		id: 5,
		name: 'Box5',
		type: 'Box',
		props: {},
		elements: [],
	},
]

const structure = [
	{
		id: 1,
		children: [
			2,
			3,
		]
	},
	{
		id: 2,
		children: [
			4,
		]
	},
	{
		id: 3,
		children: [
			5,
		]
	},
	{
		id: 4,
		children: []
	},
	{
		id: 5,
		children: []
	},
]

const getComponentById = id => components.find(item => item.id === id)


const model = structure.map(item => {
	return {
		...getComponentById(item.id),
	}
})

console.log(model)