<img /> flicker on transition when conditionally rendering separate lists

Wondering if any highly knowledgable react people might be able to help me with this problem- i don't really have any idea for a fix i have an array of data that i render. this array, however, can be either read-only, or editable, depending on whether it is the user's own page or if it's another user's page (image 1) option a) is to embed all of the editing logic (mostly just sorting with drag and drop) inside of some sort of List component, and then pass a boolean to the List component which decides to render the editable ui or the read-only ui. this works perfectly fine (image 2) option b) is to have a ReadOnlyList component, which just renders the list, and an EditableList component which encapsulates all the edit logic. From there, I conditionally render one of the two lists depending on state. i wrote things this way to potentially optimize SSR/astro islands later down the road (in the read-only case, I don't need any additional fetches from RQ on mount, maybe can even just send off the SSR'd component from astro instead of also hydrating on client). The issue is that because these are two separate lists, for some reason when i flip the state that these are conditioned on, the images inside the list flicker. they're the same images in same order in both lists, so you would not want any visual flicker from them. i imagine this is because on state change the whole list remounts, refetches the image, and we get a momentary flicker. is there anyway to like persist the image element across render to avoid this? or something along these lines? i'm pretty stumped, and option a works, so at this point it's just a matter of figuring out if this problem is solve-able