리액트 / 자바스크립트 동적으로 img를 삭제하는데 에러가 발생합니다 ㅠㅠ

에러명 : NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

코드 

jsx

<figure>

    {

      posts.url === "" ? "" : <img src={posts.url} className="att"  alt=""/>

    }

</figure>

<div className="delete" onClick={()=>{

      let figure = document.querySelector("figure");

      let att = document.querySelector(".att");

     figure.removeChild(att)

}}>파일삭제</div>

구글링해서 한 방법은 다써봤는데 안되네요 ㅠㅠㅠ 도움을 받을 수 있을까요?