[Solved]-React Typescript: Element implicitly has an 'any' type because type has no index signature-Reactjs

import * as React from "react";
import { render } from "react-dom";
import { useEffect, useState } from "react";

type X = "fname" | "lname" | "age" | "height";
const App: React.FC = props => {
  const [state, setState] = useState<{ array1: X[] }>({ array1: [] });

  const Translations: {
    [key: string]: {
      fname: string;
      lname: string;
      age: string;
      height: string;
    };
  } = {
    en: {
      fname: "First Name",
      lname: "Last Name",
      age: "Age",
      height: "Height"
    },
    cn: {
      fname: "名字",
      lname: "姓",
      age: "年龄",
      height: "高度"
    }
  };

  const object1 = Translations["en"];

  useEffect(() => {
    const array1: X[] = ["fname", "lname", "age", "height"];
    setState({ ...state, array1 });
  }, [state]);

  return (
    <div className="App">
      <ul>
        {state.array1.map((item: X, index: number) => (
          <li key={index}>{object1[item]}</li>
        ))}
      </ul>
      <p>{object1.fname}</p>
    </div>
  );
};

const rootElement = document.getElementById("root");
render(<App />, rootElement);

https://codesandbox.io/s/empty-breeze-kqpqg

Or to make it cleaner and DRY it up you can do : https://codesandbox.io/s/angry-https-rc66o?fontsize=14