fix(react-compiler): implement NumericLiteral as ObjectPropertyKey

compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts

@@ -1455,6 +1455,11 @@ function lowerObjectPropertyKey(
       kind: 'identifier',
       name: key.node.name,
     };
+  } else if (key.isNumericLiteral()) {
+    return {
+      kind: 'identifier',
+      name: String(key.node.value),
+    };
   }
 
   builder.errors.push({

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/numeric-literal-as-object-property-key.expect.md

@@ -0,0 +1,45 @@
+
+## Input
+
+```javascript
+function Test() {
+  const obj = {
+    21: 'dimaMachina'
+  }
+  return <div>{obj[21]}</div>
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [{}],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Test() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const obj = { 21: "dimaMachina" };
+
+    t0 = <div>{obj[21]}</div>;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [{}],
+};
+
+```
+
+### Eval output
+(kind: ok) <div>dimaMachina</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/numeric-literal-as-object-property-key.js

@@ -0,0 +1,11 @@
+function Test() {
+  const obj = {
+    21: 'dimaMachina',
+  };
+  return <div>{obj[21]}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [{}],
+};