Injecting a custom service into a hierarchy of components

I have a singleton service that I inject in _Imports.razor called ContactService. I also have a ContactForm component, ContactList component and a Contact component. ContactForm contains a ContactList. ContactList contains multiple Contacts. See this screenshot for the hierarchy:

I have the following buttons on the ContactForm:

When I click "Add Contact", I can see the number of contacts counter update, but the ContactList is not updated.

To resolve the above issue I decided to take the inject statement out of the _Imports.razor file and inject it directly into the ContactForm component and then pass it as a parameter into the ContactList component which resolved the issue.

Why didn't the injection in the _Imports.razor file work but passing as parameter did?

Thank you for your assistance.

I was expecting the injection in the _Imports.razor file to work but it didn't in my solution. I tried Injecting at the Root level and passing to a Component as a parameter.