Trying to update Roact element

I am using Roact to make a component that shows when a player has joined the game, show the player’s name who just joined the server.

Using a RemoteEvent, I am attempting to show the player’s name that joined the server to the rest of the players via :FireAllClients().

However, when I try and update the element, it won’t work, and it shows the player’s name that didn’t join the server recently instead.

Server-side code
local import = require(game.ReplicatedStorage.import)

local Players = import "Players"
local ReplicatedStorage = import "ReplicatedStorage"

local Roact = import "ReplicatedStorage/Modules/Roact"
local JoinedEvent = import "ReplicatedStorage/JoinedEvent"

local function joinedComponent(props)
	return Roact.createElement("ScreenGui", {
	}, {
		PlayerElement = Roact.createElement("TextLabel", {
			Text = props.Name.." has joined the server!",
			Position = UDim2.new(0, 200, 0, 50)
		})
	})
end


Players.PlayerAdded:Connect(function(player)
	local joinedElement = Roact.createElement(joinedComponent, {
		Name = player.Name
	})
	
	local handle = Roact.mount(joinedElement, player.PlayerGui)
	
	JoinedEvent:FireAllClients(handle, joinedElement, player)
end)
Client-side code
local JoinedEvent = game.ReplicatedStorage.JoinedEvent

local Roact = require(game.ReplicatedStorage.Modules.Roact)

JoinedEvent.OnClientEvent:Connect(function(handle, joinedElement, player)
	local newElement = Roact.createElement(joinedElement, {
		Name = player.Name	
	})
	
	handle = Roact.update(handle, newElement)
end)

the Roact internal key might be messed up. This keys in Roact are userdatas and not a string. So you would have to send the player name and data to the clients.