Grid ColumnSpacing and RowSpacing lost

Describe the bug

I have 2 VisualState that changes a button's content to a Row/Column devided Grid, that has Grid.RowSpacing and Grid.ColumnSpacing applied. But it seems to be lost after toggling the VisualState back to the exact same state prior.

Steps to reproduce the bug

Create a new Page, use this xaml

<Page...>
    <Page.Resources>
        <Style TargetType="Rectangle">
            <Setter Property="Fill" Value="Red"/>
        </Style>
    </Page.Resources>
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="RowDevide">
                    <VisualState.Setters>
                        <Setter Target="PreviewButton.Content">
                            <Setter.Value>
                                <Grid ColumnSpacing="5" RowSpacing="5" Background="Green">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="50"/>
                                        <RowDefinition Height="50"/>
                                    </Grid.RowDefinitions>

                                    <Rectangle/>
                                    <Rectangle Grid.Row="1"/>
                                </Grid>
                            </Setter.Value>
                        </Setter>
                    </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="ColumnDevide">
                    <VisualState.Setters>
                        <Setter Target="PreviewButton.Content">
                            <Setter.Value>
                                <Grid ColumnSpacing="5" RowSpacing="5" Background="Yellow">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="50"/>
                                        <ColumnDefinition Width="50"/>
                                    </Grid.ColumnDefinitions>

                                    <Rectangle/>
                                    <Rectangle Grid.Column="1"/>
                                </Grid>
                            </Setter.Value>
                        </Setter>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid ColumnSpacing="20">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <Button Grid.Column="1" x:Name="PreviewButton" Width="500" Height="500" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch"/>

            <StackPanel>
                <RadioButton HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="RadioButton_Click">Row</RadioButton>
                <RadioButton HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="RadioButton_Click_1">Col</RadioButton>
            </StackPanel>
        </Grid>
    </Grid>
</Page>

Use this code

        private void RadioButton_Click(object sender, RoutedEventArgs e)
        {
            VisualStateManager.GoToState(this, "RowDevide", false);
        }

        private void RadioButton_Click_1(object sender, RoutedEventArgs e)
        {
            VisualStateManager.GoToState(this, "ColumnDevide", false);
        }

Happens to both UWP & WinUI3 projects.

Expected behavior

No response

Screenshots

https://github.com/microsoft/microsoft-ui-xaml/assets/42881734/3ce67590-0d3d-464a-b603-9a1851f5945b

NuGet package version

WinUI 3 - Windows App SDK 1.4.5: 1.4.240411001

Windows version

Windows 10 (1809): Build 17763

Additional context