element.getBoundingClientRect() returns wrong values in parent with grid display

Question

Using React, I have a parent element which is div with a display grid and an input inside it.

<div style={{ display: "grid" }}>
   <input/>
</div>

My problen is when i remove the display:"grid" from style attribute, the element.getBoundingClientRect() returns right values which is :

{
  bottom: 292,
  height: 30,
  left: 524.4000244140625,
  right: 683.6000213623047,
  top: 262,
  width: 159.1999969482422,
  x: 524.4000244140625,
  y: 262
}

But when I change the display property to grid, the result is returned wrong :

{
  bottom: 292,
  height: 30,
  left: 16.399999618530273,
  right: 683.6000118255615,
  top: 262,
  width: 667.2000122070312,
  x: 16.399999618530273,
  y: 262
}

Does anyone know what is the problem?

**I forgot to say that the direction of html is rtl