How can I apply Rem units for responsive design on React?

I'm changing rem units for responsive design (use rem for width and height of boxes, and change html font-size to make them responsive) this works well in html and css.

However it causes a problem on React. I use media query and decrease html font-size to change width and height.

On React, It only works over font-size 62.5%. I can increase width and height but can't decrease them below 62.5%(10px).

App.css

* {
  padding:0
  margin:0px
}

html {
  font-size:6px
}

Other.css

.box1 {
   width:40rem
   height:10rem
 }