Altering indexed bitmap's byte array breaks image display

I'm loading a .PNG file with a 1-bit color depth (so, indexed), converting it to a byte array, JSON-serializing it, and sending it as a response to a call to a web API by a Blazor web assembly app, which then makes the byte array the (converted) source of an img in the .razor file. In experimenting with JavaScript to change the colors of the image post-reception, I found that the RGB values of the image's two colors were 2,2,2 and 154,154,154.

So imagine my thrill when I found six consecutive bytes early in the byte array with values 2,2,2,154,154,154 right about where the DIB spec says the palette colors should be! But when, before setting the byte array as the image source, I attempted to change these bytes to different values to make two new colors, it displayed with the "broken image" icon. Relevant code follows.

From the web API app: loading the file into the byte array:

    var response = new ImageAndStuff { OtherInfo = "something useful" };    response.TheImage = ImageToByteArray(System.Drawing.Image.FromFile(@"ImagePath\ImageFile.png"));...    public byte[] ImageToByteArray(System.Drawing.Image imageIn) {      using (var ms = new MemoryStream()) {        imageIn.Save(ms, imageIn.RawFormat);        return ms.ToArray();      }    }

The above-mentioned serialization wrapper:

  [DataContract]  public class ImageAndStuff {    [DataMember]    public byte[]? TheImage { get; set; }    [DataMember]    public string? OtherInfo { get; set; }  }

Requesting, receiving and using the response from the .razor file:

@inject HttpClient Http;<img id="imgBig" src="data:image;base64, @System.Convert.ToBase64String(BigImage)" style="position:absolute" />@code {  byte[]? BigImage;  protected override async Task OnInitializedAsync() {    var response = await Http.GetFromJsonAsync<ImageAndStuff>("https://localhost:7065/getimg");    // Blue for dark    response.TheImage[57] = (byte)0;    response.TheImage[58] = (byte)0;    response.TheImage[59] = (byte)255;    // Yellow for light    response.TheImage[60] = (byte)255;    response.TheImage[61] = (byte)255;    response.TheImage[62] = (byte)0;    BigImage = response.TheImage;    StateHasChanged();  }}

I know I can't use System.Drawing.Graphics on indexed bitmaps, and I can't use Bitmap in Blazor. Is there some other way I must edit the byte array if I want these palette values to change? More explicit encoding, perhaps? I'm also OK changing it in the API (which also fails when manipulated like this), but I was hoping to keep that burden client-side. Thanks in advance...