How to use the yjs.PlainState function in yjs

}).then((y) => {
  const state = Y.PlainState(y.share.state)
  setDefaults(state, {
    piece1: {translation: {x: 0, y: 0}},
    piece2: {translation: {x: 0, y: 0}},
    piece3: {translation: {x: 0, y: 0}},
    piece4: {translation: {x: 0, y: 0}}
  })

  window.state = state
  var origin // mouse start position - translation of piece
  var drag = d3Drag()
    .on('start', function (params) {
      // get the translation of the element
      var translation = select(this).attr('transform').slice(10, -1).split(',').map(Number)
      // mouse coordinates
      var mouse = d3Mouse(this.parentNode)
      origin = {

}).then((y) => {
  const state = Y.PlainState(y.share.state)
  window.state = state // for debugging convenience
  draw(state)
  state.observe(() => {
    draw(state)
  })
})

}).then((y) => {
  const state = Y.PlainState(y.share.state)
  setDefaults(state, {
    piece1: {translation: {x: 0, y: 0}},
    piece2: {translation: {x: 0, y: 0}},
    piece3: {translation: {x: 0, y: 0}},
    piece4: {translation: {x: 0, y: 0}}
  })

  window.state = state
  draw(state)
  state.observe(() => {
    draw(state)
  })
})

const states = yUsers.map((y) => {
    return Y.PlainState(y.share.root)
  })
  return states