適切に応答しない滑らかな視差効果

現在、私は達成しようとしているこれは、1つの画像を左から右に移動すると、ユーザーが視差の影響を作成ダウンスクロールします.

通常はDOMを使用します.

let image = document.getElementById("image");

window.addEventListener('scroll', function() {
  let value = window.scrollY;
  image.style.marginRight = value * 4 + 'px';
  image.style.marginTop = value * 1.5 + 'px';
}

しかし、現在、私はSETSTATEを使用して反応でこの効果を複製しようとしています、しかし、イメージはマウススクロール車輪とともに動きません、そして、レイアウトは正しく見えません:
Codesandbox : https://codesandbox.io/s/modest-hill-2wuko?file=/src/App.tsx
コード

const [leftScroll,setLeftScroll] = useState(false);
const [topScroll,setTopScroll] = useState(false);
const [textScroll, setTextScroll] = useState(false);

  useEffect(function onFirstMount() {
    const changeBackground = () => {
      let value =  window.scrollY;
      console.log(window.scrollY);

      if(value>0 && value<200){
        setLeftScroll(true)
        setTopScroll(true)
        setTextScroll(true);
      }else{
        setLeftScroll(false)
        setTopScroll(false)
        setTextScroll(false);
      }
    }

    window.addEventListener('scroll', changeBackground);

    return null;
  }, []);
  return (
    <div className="background">
     <div style={{backgroundColor:"#0E2043",padding:"50px",height:"1000px",display:"flex",justifyContent:"center"}}>
      <div style={{color:"#fff",textAlign:"center",fontSize:"100px",fontFamily:"Roboto", display:"flex",justifyContent:"center"}}>Vanuatu</div>
      <img className="image"
              style={{marginRight:leftScroll ? '300px' : '0px',transition:"2s",marginTop:topScroll ? "300px" : "0px"}}
              src="https://cdn.britannica.com/87/122087-050-1C269E8D/Cover-passport.jpg"
            />
       <div
          className="text"
          style={{
            marginTop: textScroll ? "300px" : "800px",
            transition: "4s",
            marginLeft: "120px"
          }}
        >
          Minimum Investment
        </div>
    </div>
    </div>

それで、これをするより簡単な方法があります、あるいは、私は私の反応プロジェクトでそれらのDOM機能を実行することができて、まだ視差のような影響を持ちます?