Ridge Groove border in .NET MAUI with hover effect

RidgeBorder.xaml

<ContentPage.Resources>
    <LinearGradientBrush x:Key="OuterBrushNormal" StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="#E0E0E0" Offset="0.5" />
        <GradientStop Color="#282828" Offset="0.5" />
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="OuterBrushHover" StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="#282828" Offset="0.5" />
        <GradientStop Color="#E0E0E0" Offset="0.5" />
    </LinearGradientBrush>
</ContentPage.Resources>

<Border StrokeThickness="2" x:Name="theBorder"
        Grid.Row="1" Grid.Column="0" HeightRequest="50" WidthRequest="50"
        Stroke="{StaticResource OuterBrushNormal}" ToolTipProperties.Text="Change color">

    <Border x:Name="innerBorder" StrokeThickness="2" HeightRequest="46" WidthRequest="46" Stroke="{StaticResource OuterBrushHover}" >
        <BoxView x:Name="selectedColor" BackgroundColor="#E3CF3F"/>
    </Border>
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="Normal" />
                <VisualState x:Name="PointerOver">
                    <VisualState.Setters >
                        <Setter Property="Stroke" Value="{StaticResource OuterBrushHover}"/>
                        <Setter TargetName="innerBorder" Property="Border.Stroke" Value="{StaticResource OuterBrushNormal}"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </VisualStateManager.VisualStateGroups>
</Border>