• I am trying to learn react but i keep getting this error, i am still not clear on the props concept so please bear with me
  enter image description here

App.tsx

import ListGroup from "./components/ListGroup";

function App() {
  return (
    <div>
      <ListGroup></ListGroup>
    </div>
  );
}
export default App;

ListGroup.tsx

import { useState } from "react";
import styled from "styled-components";
interface Props {
  items: string[];
  heading: string;
  onSelectItem: (item: string) => void;
}
function ListGroup({ items, heading, onSelectItem }: Props) {
  //Hook
  const [selectedIndex, setSelectedIndex] = useState(-1);
  return (
    <>
      <h1>{heading}</h1>
      {items.length === 0 && <p>No items found</p>}
      <ul className="list-group">
        {items.map((item, index) => (
          <li
            className={
              selectedIndex === index
                ? "list-group-item active"
                : "list-group-item"
            }
            key={item}
            onClick={() => {
              setSelectedIndex(index);
              onSelectItem(item);
            }}
          >
            {item}
          </li>
        ))}
      </ul>
    </>
  );
}

export default ListGroup;

enter image description here

After doing a code along tutorial, I was playing around with the code but I don’t remember what I had deleted and now its not displaying, I have no idea what’s wrong here