TextSize issues when updating using roact (Tried without roact)

I’m currently writing a debugger and im using roact for the ui, im currently writing the output script however when i’m changing the text size to 14 it goes to 1, any help is appreciated.

local logService = game:GetService("LogService")
local textService = game:GetService("TextService")
local runService = game:GetService("RunService")
local players = game:GetService("Players")
local player = players.LocalPlayer
local playerGui = player:WaitForChild("PlayerGui")

local camera = workspace.CurrentCamera

local roact = require(script.Parent:WaitForChild("Roact"))

local lifetime = 120
local colors = {
	[Enum.MessageType.MessageOutput] = Color3.new(1,1,1),
	[Enum.MessageType.MessageWarning] = Color3.new(1, 0.768627, 0.219608),
	[Enum.MessageType.MessageError] = Color3.new(1, 0.164706, 0.164706),
}

local function ui(tokens)
	local children = {}
	
	children.ListLayout = roact.createElement("UIListLayout",{
		SortOrder = Enum.SortOrder.Name,
		VerticalAlignment = Enum.VerticalAlignment.Bottom,
	})
	
	local font = Enum.Font.SourceSansSemibold
	local textSize = 14
	local xSize = math.floor(camera.ViewportSize.X*.5)
	
	for index,item in tokens do
		-- calc size
		
		local textSize = textService:GetTextSize(item.Text,textSize,font,Vector2.new(xSize,1e9))
		
		
		children[index] = roact.createElement("TextLabel",{
			TextSize = textSize,
			Size = UDim2.fromOffset(textSize.X,textSize.Y),
			BackgroundColor3 = Color3.new(0,0,0),
			BackgroundTransparency = .5,
			Text = item.Text,
			TextXAlignment = Enum.TextXAlignment.Left, 
			Font = font,
			TextColor3 = item.TextColor,
			Name = #tokens-index,
			BorderSizePixel = 0,
			TextWrapped = true,
		})
	end
	
	local app = roact.createElement("ScreenGui", {IgnoreGuiInset = true,DisplayOrder = 1000},{
		ControlFrame = roact.createElement("Frame",{
			Size = UDim2.new(.5,0,1),
			AnchorPoint = Vector2.new(0,1),
			Position = UDim2.new(0,0,1,0),
			BorderSizePixel = 0,
			BackgroundColor3 = Color3.new(1,1,1),
			BackgroundTransparency = 1,
		},children)
	})
	
	return app
end

local output = {}
output.__index = output
	
	function output.new()
		local self = setmetatable({},output)
		
		self.ui = roact.mount(ui({}),playerGui)
		self.connections = {}
		self.tokens = {}
		
		return self
	end
	
	function output:toggle()
		self.connections["log"] = logService.MessageOut:Connect(function(msg,msgtype)
			if not colors[msgtype] then
				return
			end
			
			table.insert(self.tokens,{Text = msg,TextColor = colors[msgtype],Time = os.clock()})
		end)
		
		self.connections["run"] = runService.Heartbeat:Connect(function()
			for index,token in self.tokens do
				if os.clock()-token.Time > lifetime then
					table.remove(self.tokens,index)
				end
			end

			roact.update(self.ui,ui(self.tokens))
		end)
	end
	
return output

Unexpected behaviour:
image

Expected behaviour:
image

I fixed the issue I was overwriting text size with a vector 2