Creating Scoped Service but unable to provide a value for the property on use as no registered service

I am attempting to store the selected Group ID (room) to then be referenced by other components on the client with SignalR however I im consistently getting the below errorInvalidOperationException: Cannot provide a value for property 'RoomState' on type 'BlazorSignalRApp.Client.Pages.Components.JoinRoom'. There is no registered service of type 'BlazorSignalRApp.Client.RoomStateService'.

Please can someone identify where I'm going wrong with this and let me know what I can do to improve and get it to work?

Program.cs

builder.Services.AddScoped<IRoomStateService, RoomStateService>();

IRoomStateService.cs

{    public interface IRoomStateService    {        string? RoomId { get; set; }        event EventHandler? OnRoomIdChanged;    }}

RoomStateService.cs

namespace BlazorSignalRApp.Client;public class RoomStateService : IRoomStateService{    private string? roomId;    public string? RoomId    {        get => roomId;        set        {            if (roomId != value)            {                roomId = value;                OnRoomIdChanged?.Invoke(this, EventArgs.Empty);            }        }    }    public event EventHandler? OnRoomIdChanged;}

JoinRoom.razor

@inject IRoomStateService RoomState<div class="card"><div class="card-body"><h5 class="card-title">Join room</h5><p class="card-text">Enter the room ID to join a room.</p><div class="input-group"><input class="form-control" @bind="roomId" placeholder="Enter Room ID" /><button type="button" class="btn btn-primary" @onclick="StoreRoomId">Store Room ID</button></div></div></div>@code {    private string? roomId;    private void StoreRoomId()    {        RoomState.RoomId = roomId;    }}