Passing value from one component to another using Blazor Sections

I am new to using Blazor UI and I am trying to pass a text input value from one component to another.

I have a nested child layout component that contains an input component and other components. Layout.razor is nested within the MainLayout.razor component.

Layout.razor

@inherits LayoutComponentBase<div class="mainpage"><main><div class="top-row"><SectionOutlet SectionName="top-row-section"><div class="toprow-inputbox"><TextInput></TextInput> </div><div class="toprow-checkbox"><CheckBoxInput></CheckBoxInput></div></SectionOutlet></div></main></div>

TextInput.razor

<InputText @bind-Value="@Value" class="inputbox"></InputText><button type="submit" onclick="@(()=>OnButtonClick(Value))"></button>

TextInput.razor.cs

public partial class TextInput{    [Parameter] public string Value { get; set; }    [Parameter] public EventCallback<string> OnClick { get; set; }    private void OnButtonClick(string value)    {        //To do: Pass value to the grid component to be used there        OnClick.InvokeAsync(value);    }}

I would like to pass the text value from TextInput component to the grid component which exists in the main layout. I have tried a few different things but I am not sure how to proceed with this. The value from the text box would be used to display data in the grid accordingly.

Grid.razor

<SectionContent SectionName="top-row-section"><table><thead></thead><tbody>                                //the value from text box would be displayed here</tbody></table></SectionContent>

Any pointers would be greatly appreciated. Thanks in advance