[애니메이션] 이미지 요소를 포함하는 컴포넌트 드래그 오류

다음과 같이 비행기 이미지가 내부에 있고 이를 감싸는 div형식의 비행기 컴포넌트를 만들었다.

<AirplaneContainer drag dragConstraints={constraintsRef}>
  {isSpeech && <Speech>Drag Me!</Speech>}
  <StAirplane onClick={() => setIsSpeech(false)}>
    <img src={AirplaneImg} alt="비행기 이미지" />
  </StAirplane>
</AirplaneContainer>

// styled-components
const AirplaneContainer = styled(motion.aside)`
  position: absolute;
  bottom: 10rem;
  right: 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 20;
`;

const Speech = styled.div`
  font-size: 2rem;
`;

const StAirplane = styled(motion.div)`
  margin-top: 2rem;
  cursor: pointer;
  > img {
    width: 32rem;
    height: 20rem;
  }
`;

상위 컴포넌트에 drag 속성과 드래그영역에 해당하는 dragConstraints를 넣어주었는데도 StAirplane이 드래그되지 않고 이미지만 따라오는 느낌이었다. 그래서 다음과 같이 이미지 태그에 draggable={false} 속성을 넣어주니 해결되었다.

 <img draggable={false} src={AirplaneImg} alt="비행기 이미지" />