Flow js - how read only syntax works and why to use it?

I'm trying to learn Flow (https://flow.org/) which is like lighter version of typescript,

I found this article: https://medium.com/@forbeslindesay/covariance-and-contravariance-c3b43d805611

 I don't fully understand why Flow would throw up an error when running this code (code is from that article) without readonly syntax as we don't change anything in the object and I don't understand how could we possibly change something there, anyone can explain it to me?:

function logStringContainer(container: {value: string}) {
  logNullableStringContainer(container);
}

function logNullableStringContainer(container: {value: ?string}) {  

  if (container.value != null) {    
    console.log(container.value);  
   }
  }

 logStringContainer({value: 'foo'});

Select allOpen in new window