Jak przekazać talicę obiektów do komponentu?

(property) data: menuItems[]
Type '{ data: menuItems[]; }' is not assignable to type 'IntrinsicAttributes & menuItems[]'.
  Property 'data' does not exist on type 'IntrinsicAttributes & menuItems[]'.ts(2322)

interface menuItems {
  name: string;
  level: number;
  id: number;
  pid: number;
  children?: any[];
}

const Settings = () => {
  const { flattenarr, zerotreetoarr } = useConvertTree();
  const [data, setData] = useState<menuItems[]>([]);
  useEffect(() => {
    zerotreetoarr(tree.children as [], [0]);
    // eslint-disable-next-line react-hooks/exhaustive-deps
    setData(flattenarr);
  }, []);
  return <TreeSettings data={data} />;
};

 interface menuItems {
  name: string;
  level: number;
  id: number;
  pid: number;
  children?: any[];
}
 interface treeItems {
  name: string;
  children: treeItems[];
}

const TreeSettings = (data: menuItems[]) => {
  return (
    <>
      {data.map((t) => {
        return <div>{t.name}</div>;
      })}
    </>
  );
};

const TreeSettings = (props) => {
  console.dir(props); // <-- dodatkowy obiekt, o który mi chodzi
  console.dir(props.data); // <-- nasza wartość, która też może być obiektem
  console.dir(props.data.foo); // <-- i finalnie jakaś przykładowa właściwość
  
  // ...
}

<TreeSettings data={data} />

const TreeSettings = ({ data }) => {
  console.dir(data);
  console.dir(data.foo);
  
  // ...
}

import type { VC } from 'react';

interface MenuItems {
  // ...
}

interface TreeSettingsProps {
  data: MenuItems[];
}

const TreeSettings: VC<TreeSettingsProps> = ({ data }) => {
  // ...
}