我做了这个应用程序，将'word magnets'渲染到冰箱上，用户可以将单词拖到冰箱的任何部分来造句，并将其保存到本地存储。页面加载时会出现错误，单词磁铁被移出了位置。位置的差异似乎是基于单词组件被点击的位置。如果用户单击左上角，则Word在重新加载时会呈现在正确的位置，但如果用户单击Word组件上的其他任何位置，则会根据单击时离右上角的距离呈现位置。我怎样才能改变我的组件呈现在相同的位置，无论它被点击？

import React from 'react'
import Draggable from 'react-draggable'
import Scene from './Scene'
import Word from './Word'
import Header from './Header'

const FridgeMagnets = () => {
  const [dragWord, setDragWord] = React.useState('')
  const [words, setWords] = React.useState([])

  //set bounds for magnets
  const viewportWidth = window.innerWidth
  const bounds = {
    left: viewportWidth * 0.025,
    top: 15,
    right: viewportWidth * 0.44,
    bottom: viewportWidth
  }

  React.useEffect(() => {
    //check if there are words in local storage
    const localStorageWords = JSON.parse(localStorage.getItem('words'))
    if (localStorageWords) {
      setWords(localStorageWords)
    } else {
      setWords([
        { text: 'word', position: { x: 910, y: 210 }, id: 1 },
        { text: 'the', position: { x: 310, y: 210 }, id: 2 },
        { text: 'power', position: { x: 310, y: 510 }, id: 3 },
        { text: 'are', position: { x: 110, y: 610 }, id: 4 },
        { text: 'magnet', position: { x: 110, y: 650 }, id: 5 },
        { text: 'fridge', position: { x: 120, y: 700 }, id: 6 },
        { text: 'local', position: { x: 210, y: 410 }, id: 7 },
        { text: 'yes', position: { x: 310, y: 80 }, id: 8 }
      ])
    }
  }, [])

  //set the word to be moved
  const handleDrag = word => {
    setDragWord(word)
  }

  //update words array with new position for word
  const endPosition = position => {
    console.log(position.clientX, position.clientY, dragWord)
    //new position dragWord
    const updatedWords = words.map(word => {
      if (word === dragWord) {
        return {
          ...word,
          position: { x: position.clientX, y: position.clientY }
        }
      }
      return word
    })
    setWords(updatedWords)
  }

  //save words to local storage
  const handleSave = () => {
    localStorage.setItem('words', JSON.stringify(words))
  }

  return (
    <Scene>
      <div className="relative">
        <Header />
      </div>
      {words.map((word, index, id) => {
        return (
          <Draggable
            key={index}
            onDrag={() => handleDrag(word)}
            defaultPosition={word.position}
            bounds={bounds}
            onStop={position => endPosition(position)}
          >
            <div>
              <Word text={word.text} id={id} />
            </div>
          </Draggable>
        )
      })}
      <button onClick={handleSave}>save</button>
    </Scene>
  )
}

export default FridgeMagnets