how to iterate and display each element from the inner list reactjs?

You can do it like this

render(){
  const child = Object.values(this.state.items);

  return (
    <div>
      {child.map((element, index) => {
        const grandChild = Object.values(this.state.items[index].grandChildren);

        return (
          <div key={index}>
            <Autocomplete
              value={element.children} // this displays children like "A" OR "C"
            />

            {grandChild.map((element1, index) => (
              <Autocomplete
                value={element1} 
              />
            ))}
          </div>
        );
      })}
    </div>
  );
};