자바스크립트 react관련질문좀합니다

버튼을 클릭하면 사각형을 특정 공간만큼 움직이려고 하거든요.

1. import React, { Component } from 'react';

2. import './App.css';

3. class App extends Component {

4. constructor(props) {

5. super(props);

6. this.state = {

7. marginElem: document.getElementById("sq")

8. }

9. this.onclick = this.onclick.bind(this);

10. }

11. onclick(e) {

12. this.setState({ marginElem: this.state.marginElem.style.marginLeft + "1.5rem"});

13. }

14. render() {

15. return (

16. <div style={{marginTop:"3rem", marginLeft: "3rem"}}>

17. <div id="sq" className="square"></div>

18. <div>

19. <input onClick={this.onclick} className="button" type="button" value="click" />

20. </div>

21. </div>

22. );

23. }

24. }

25. export default App;

버튼을 클릭하면 null 이 발생하여 에러가 뜨거든요. 상태를 업데이트 시켜주면 되는거 같은데 어느 부분이 잘못된 건가요?