Single select2 with data array and default empty

Hi there! I’m struggling to get my select2 to show the placeholder on opening. Instead of showing the placeholder, the first item gets selected. I can deselect it, but that’s not really what I want. Strange thing is that I only see this behavior if I use a data array, not if I use a list of options. What am I doing wrong here?

This is working correctly (showing the placeholder when the pages is loaded):

<select class="js-basic-single-data select2" id="demo1" name="demo1">
	<option></option>
	<option value="1">Tester</option>
</select>

<script>
	$(document).ready(function() {
		$('#demo1').select2({
			width: '50%',
			placeholder: "Please select a value",
			allowClear: true
		});
	});
</script>

But this version doesn’t work (It’s showing “Tester”):

<select class="js-basic-single-data select2" id="demo2" name="demo2">
</select>

<script>
	var option_type_data = [
		{
			id: 1,
			text: "Tester",
		},
	];

	$(document).ready(function() {
		$('#demo2').select2({
			data: option_type_data,
			width: '50%',
			placeholder: "Please select a value",
			allowClear: true
		});
	});
</script>

I’ve tried adding an empty option, but that’s getting added to the list too then.

Any suggestions?