list.tsx

const ListItems = () => {
  const items = [
    "Aline",
    "Clemmie",
    "Sheba",
    "Netty",
    "Spencer",
    "Aube",
    "Monika",
    "Mitch",
    "Micky",
    "Alvera",
    "Gayle",
    "Hale",
    "Lynda",
    "Jodi",
    "Inga",
    "Deck",
    "Benton",
    "Jyoti",
    "Melanie",
    "Rubin",
    "Marcela",
    "Klara",
    "Barb",
    "Suzie",
    "Dalston",
    "Mandi",
    "Carie",
    "Giffy",
    "Valentino",
    "Myer",
    "Lyell",
    "Angela",
    "Hugues",
    "Jeane",
    "Kandy",
    "Romain",
    "Axe",
    "Darrell",
    "Gaspard",
    "Melessa",
    "Tommy",
    "Austine",
    "Wilow",
    "Stephen",
    "Isak",
    "Agosto",
    "Merrel",
    "Danette",
    "Aurie",
    "Myrtia",
    "Stephanie",
    "Angele",
    "Bailey",
    "Catharina",
    "Felicia",
    "Cecile",
    "Marita",
    "Melina",
    "Emerson",
    "Desmund",
    "Kimberly",
    "Byran",
    "Collin",
    "Cameron",
    "Neddy",
    "Zerk",
    "Luci",
    "Arlinda",
    "Bethina",
    "Leonid",
    "Udall",
    "Cloe",
    "Martguerita",
    "Hallie",
    "Hasty",
    "Philippa",
    "Urban",
    "Rutter",
    "Jemie",
    "Arel",
    "Gussi",
    "Durante",
    "Janela",
    "Lacee",
    "Cointon",
    "Jessamine",
    "Tracey",
    "Jasmin",
    "Matteo",
    "Amby",
    "Addy",
    "Barth",
    "Agace",
    "Dania",
    "Megen",
    "Myrtie",
    "Lynnette",
    "Bryana",
    "Eirena",
    "Emelina",
    "Garrett",
    "Antone",
    "Jerrylee",
    "Jacobo",
    "Berti",
    "Kathryne",
    "Judy",
    "Hobard",
    "Jerry",
    "Pamela",
    "Lilly",
    "Shaylyn",
    "Braden",
    "Avram",
    "Halette",
    "Vachel",
    "Sarajane",
    "Appolonia",
    "Bron",
    "Grete",
    "Benoite",
    "Borg",
    "Remus",
    "Anjanette",
    "Adrien",
    "Gayler",
    "Danny",
    "Jervis",
    "Marina",
    "Moselle",
    "Evey",
    "Gualterio",
    "Rosmunda",
    "Dolly",
    "Lynn",
    "Letti",
    "Hadlee",
    "Vicky",
    "Sky",
    "Aylmer",
    "Bald",
    "Curcio",
    "Dane",
    "Madelyn",
    "Tybie",
    "Gisele",
    "Sherie",
    "Jordanna",
    "Rockie",
    "Gerrie",
    "Muhammad",
    "Shurlocke",
    "Hadley",
    "Glenn",
    "Cary",
    "Melisent",
    "Fredrick",
    "Korie",
    "Toni",
    "Kelsey",
    "Ronnica",
    "Piper",
    "Ofilia",
    "Nissa",
    "Viole",
    "Eba",
    "Robb",
    "Rudd",
    "Dasi",
    "Elyssa",
    "Gui",
    "Julius",
    "Jocko",
    "Elke",
    "Bartholomew",
    "Coraline",
    "Giulietta",
    "Layney",
    "Codee",
    "Eugenius",
    "Benedetto",
    "Ruperto",
    "Brit",
    "Myrah",
    "Ginelle",
    "Shayna",
    "Hermia",
    "Nariko",
    "Nerty",
    "Rhianon",
    "Conney",
    "Denise",
    "Axel",
    "Huntley",
    "Friedrich",
    "Grethel",
    "Saba",
    "Cyrill",
    "Ellen",
    "Angelo",
    "Ronna",
    "Josh",
    "Dilan",
    "Emlyn",
    "Gan",
    "Kalvin",
    "Laverne",
    "Wake",
    "Mycah",
    "Bev",
    "Scarlett",
    "Hedi",
    "Brannon",
    "Chanda",
    "Lory",
    "Keir",
    "Paule",
    "Asher",
    "Carlen",
    "Web",
    "Sayre",
    "Marika",
    "Giff",
    "Clementia",
    "Carlene",
    "Patricio",
    "Corny",
    "Modestine",
    "Karlen",
    "Dall",
    "Peter",
    "Danny",
    "Forest",
    "Geno",
    "Matthew",
    "Jesus",
    "George",
    "Joannes",
    "Linn",
    "Cacilie",
    "Ferd",
    "Thomasina",
    "Hattie",
    "Darci",
    "Anthe",
    "Shawna",
    "Ricky",
    "Eda",
    "Lexi",
    "Gracie",
    "Mamie",
    "Nathalie",
    "Lanna",
    "Meredeth",
    "Nester",
    "Boyd",
    "Marrissa",
    "Annmaria",
    "Pieter",
    "Florence",
    "Kendre",
    "Liv",
    "Robinson",
    "Brenden",
    "Carl",
    "Brittany",
    "Gusta",
    "Harlen",
    "Ernestine",
    "Milka",
    "Bonny",
    "Barnaby",
    "Karoline",
    "Daisey",
    "Jo-ann",
    "Jere",
    "Tuesday",
    "Gregor",
    "Shayla",
    "Jordon",
    "Worthy",
    "Esta",
    "Nike",
    "Annemarie",
    "Alanson",
    "Earlie",
    "Elyse",
    "Reeba",
    "Anderea",
    "Marwin",
    "Nicolea",
    "Malchy",
    "Olag",
    "Alon",
    "Carmella",
    "Valentijn",
    "D'arcy",
    "Brooks",
    "Tani",
    "Libbie",
    "Joaquin",
    "Farrell",
    "Kathy",
    "Sanson",
    "Pedro",
    "Melania",
    "Christie",
    "Steven",
    "Teodorico",
    "Shawnee",
    "Raphaela",
    "Lita",
    "Dyanne",
    "Tisha",
    "Anthea",
    "Cami",
    "Nari",
    "Gannon",
    "Reinwald",
    "Tully",
    "Carree",
    "Tim",
    "Sloane",
    "Aura",
    "Astra",
    "Gilberto",
    "Lydia",
    "Ray",
    "Lil",
    "Oliy",
    "Berkly",
    "Aldon",
    "Iolande",
    "Dexter",
    "Garek",
    "Brianne",
    "Benedetta",
    "Kizzie",
    "Amelie",
    "Abigale",
    "Shep",
    "Rosalyn",
    "Hinda",
    "Teirtza",
    "Sondra",
    "Antonia",
    "Fredericka",
    "Kiah",
    "Cami",
    "Waite",
    "Daune",
    "Issie",
    "Sisile",
    "Desdemona",
    "Lacee",
    "Georgena",
    "Jolyn",
    "Cord",
    "Brigitte",
    "Winfield",
    "Tatiania",
    "Alexio",
    "Sosanna",
    "Abie",
    "Esme",
    "Bartel",
    "Delilah",
    "Salomo",
    "Debby",
    "Karlens",
    "Mendel",
    "Violet",
    "Sileas",
    "Lazaro",
    "Sallyanne",
    "Maryann",
    "Rocky",
    "Silvie",
    "Georgie",
    "Cariotta",
    "Tiebold",
    "Aubree",
    "Andromache",
    "Jorry",
    "Markus",
    "Florette",
    "Rudd",
    "Brendan",
    "Tallie",
    "Virgil",
    "Casi",
    "Lorene",
    "Winnah",
    "Alayne",
    "Kendre",
    "Ursola",
    "Tobie",
    "Cathi",
    "Allene",
    "Israel",
    "Siobhan",
    "Udale",
    "Livia",
    "Hermie",
    "Livvy",
    "Bev",
    "Renie",
    "Jolene",
    "Vernen",
    "Dosi",
    "Frannie",
    "Aurea",
    "Pearce",
    "Corrie",
    "Webster",
    "Mariel",
    "Jefferey",
    "Jerrie",
    "Egan",
    "Avril",
    "Ole",
    "Rosamund",
    "Cobb",
    "Susanna",
    "Rawley",
    "Quintana",
    "Normie",
    "Juliane",
    "Abelard",
    "Elias",
    "Madelena",
    "Corabel",
    "Vivienne",
    "Maurie",
    "Elladine",
    "Vassili",
    "Doll",
    "Ambrosio",
    "Filmer",
    "Griffin",
    "Trish",
    "Tiler",
    "Misti",
    "Duff",
    "Ynez",
    "Harriott",
    "Jayne",
    "Aldric",
    "Dorolice",
    "Beck",
    "Shannan",
    "Ernestus",
    "Claretta",
    "Terrill",
    "Wang",
    "Mathias",
    "Salim",
    "Skell",
    "Hugues",
    "Mabel",
    "Shea",
    "Tuckie",
    "Rosalinda",
    "Marcille",
    "Mozes",
    "Marsiella",
    "Emylee",
    "Paxon",
    "Thorin",
    "Kele",
    "Amy",
    "Rasia",
    "Raeann",
    "Emerson",
    "Farah",
    "Faythe",
    "Jenelle",
    "Fancie",
    "Hunfredo",
    "Phyllis",
    "Frants",
    "Carolan",
    "Kiel",
    "Susy",
    "Gwennie",
    "Denice",
    "Tadio",
    "Van",
    "Blythe",
    "Elsie",
    "Porty",
    "Margaretta",
    "Emili",
    "Renae",
    "Justina",
    "Vinny",
    "Reagen",
    "Ferdy",
    "Francisca",
    "Dulcia",
    "Gabriell",
    "Kippar",
    "Pearla",
    "Angelico",
    "Ealasaid",
    "Leopold",
    "Quill",
    "Deina",
    "Maribel",
    "Chickie",
    "Madelle",
    "Marrissa",
    "Thorndike",
    "Holly",
    "Ruthanne",
    "Gweneth",
    "Claudius",
    "Hollis",
    "Benedicto",
    "Roselia",
    "Sula",
    "Hilario",
    "Godfrey",
    "Johnny",
    "Chic",
    "Cull",
    "Austine",
    "Dalenna",
    "Eldridge",
    "Candis",
    "Winni",
    "Ase",
    "Rowney",
    "Dorine",
    "Farleigh",
    "Moira",
    "Guinevere",
    "Arel",
    "Friederike",
    "Zeke",
    "Quillan",
    "Inez",
    "Chloe",
    "Daphna",
    "Kaleena",
    "Quincy",
    "Noby",
    "Leonardo",
    "Barbi",
    "Mirna",
    "Marion",
    "Hugo",
    "Tani",
    "Agace",
    "Lani",
    "Sim",
    "Solly",
    "Herby",
    "Ilario",
    "Gilbertine",
    "Livvy",
    "Antonius",
    "Zilvia",
    "Mariejeanne",
    "Benedicta",
    "Yolane",
    "Ogdon",
    "Cort",
    "Ericha",
    "Ivonne",
    "Bernardine",
    "Mathilde",
    "Frieda",
    "Tom",
    "Wilone",
    "Margareta",
    "Latrina",
    "Lucio",
    "Maryanna",
    "Frazier",
    "Ellen",
    "Marget",
    "Aristotle",
    "Devora",
    "Caralie",
    "Stormi",
    "Dougy",
    "Sayres",
    "Dexter",
    "Robb",
    "Camille",
    "Nadine",
    "Chlo",
    "Tish",
    "Elsa",
    "Karlis",
    "Davide",
    "Millard",
    "Leola",
    "Inger",
    "Merv",
    "Arlan",
    "Alexis",
    "Dane",
    "Nikolos",
    "Jamie",
    "Patin",
    "Friedrich",
    "Amalee",
    "Mirabella",
    "Rubetta",
    "Faydra",
    "Jennine",
    "Morly",
    "Mike",
    "Regen",
    "Ami",
    "Juline",
    "Glenine",
    "Alayne",
    "Dewitt",
    "Lenore",
    "Merrill",
    "Vale",
    "Thayne",
    "Gage",
    "Gizela",
    "Antonia",
    "Elissa",
    "Gabi",
    "Levin",
    "Jeddy",
    "Louis",
    "Irving",
    "Mariellen",
    "Etta",
    "Dorie",
    "Erwin",
    "Biddie",
    "Jandy",
    "Jade",
    "Skelly",
    "Wesley",
    "Bobbe",
    "Eilis",
    "Aurelea",
    "Arthur",
    "Bette",
    "Sheppard",
    "Tabbie",
    "Tallou",
    "Eloisa",
    "Joelle",
    "Aviva",
    "Heywood",
    "Ariella",
    "Bren",
    "Blake",
    "Roosevelt",
    "Kaitlyn",
    "Adiana",
    "Doreen",
    "Luci",
    "Abeu",
    "Guillaume",
    "Tiffie",
    "Waverley",
    "Gabbey",
    "Cassius",
    "Allie",
    "Robbyn",
    "Jonas",
    "Eldridge",
    "Ichabod",
    "Idette",
    "Rob",
    "Stephani",
    "Jeffrey",
    "Ursa",
    "Ericha",
    "Clayson",
    "Clare",
    "Cullen",
    "Helga",
    "Goldi",
    "Hakim",
    "Orsola",
    "Harmony",
    "Jada",
    "Quinn",
    "Rica",
    "Charissa",
    "Ollie",
    "Aube",
    "Jeniffer",
    "Bret",
    "James",
    "Sybila",
    "Kathleen",
    "Nanci",
    "Denney",
    "Terrijo",
    "Kendricks",
    "Burnard",
    "Bear",
    "Dorry",
    "Erick",
    "Itch",
    "Thacher",
    "Traver",
    "See",
    "Iain",
    "Addy",
    "Briano",
    "Elnore",
    "Griffie",
    "Brucie",
    "Lari",
    "Zenia",
    "Adah",
    "Olivia",
    "Elliot",
    "Nariko",
    "Adler",
    "Marlee",
    "Tallie",
    "Robinetta",
    "Des",
    "Maddi",
    "Dimitri",
    "Trumann",
    "Dom",
    "Rusty",
    "Claudine",
    "Henriette",
    "Trumaine",
    "Candice",
    "Gage",
    "Ezekiel",
    "Harvey",
    "Dyanne",
    "Benn",
    "Walther",
    "Stormi",
    "Monroe",
    "Barbra",
    "Daile",
    "Gilles",
    "Bobbie",
    "Ilysa",
    "Sarette",
    "Robbert",
    "Lora",
    "Renate",
    "Juditha",
    "Buddy",
    "Helen",
    "Dame",
    "Saunderson",
    "Elisabet",
    "Lynna",
    "Merrick",
    "Vivia",
    "Renard",
    "Holly-anne",
    "Karee",
    "Micheal",
    "Susie",
    "Gaby",
    "Lenore",
    "Madelaine",
    "Tanney",
    "Krystle",
    "Leigh",
    "Dill",
    "Berton",
    "Davita",
    "Jolyn",
    "Artemis",
    "Neron",
    "Clem",
    "Anthia",
    "Rafaelita",
    "Zolly",
    "Orelle",
    "Kylen",
    "Kasey",
    "Sidoney",
    "Leonhard",
    "Emma",
    "Madonna",
    "Joann",
    "Urban",
    "Kristine",
    "Lutero",
    "Krishnah",
    "Augustus",
    "Prentiss",
    "Merry",
    "Hillary",
    "Rozanne",
    "Mariel",
    "Job",
    "Laina",
    "Anton",
    "Honor",
    "Jacenta",
    "Tabbitha",
    "Tabatha",
    "Kinna",
    "Orella",
    "Chrissie",
    "Cody",
    "Ursola",
    "Devonne",
    "Linell",
    "Carmelita",
    "Bethina",
    "Isidoro",
    "Kath",
    "Ray",
    "Marlene",
    "Carmon",
    "Pall",
    "Fran",
    "Bone",
    "Ruggiero",
    "Muhammad",
    "Micheil",
    "Kerri",
    "Wilbur",
    "Milli",
    "Vittoria",
    "Mozelle",
    "Briny",
    "Zena",
    "Ardis",
    "Luce",
    "Terese",
    "Dasha",
    "Aeriell",
    "Werner",
    "Pascal",
    "Aurelia",
    "Ilise",
    "Judye",
    "Rosita",
    "Cindi",
    "Ellette",
    "Errick",
    "Neille",
    "Delia",
    "Mickie",
    "Alec",
    "Gamaliel",
    "Celia",
    "Nicolis",
    "Olivette",
    "Gerhardine",
    "Hart",
    "Fredek",
    "Anett",
    "Marcelia",
    "Rorke",
    "Linell",
    "Hulda",
    "Anthe",
    "Ferris",
    "Rozella",
    "Arluene",
    "Trstram",
    "Jack",
    "Bailey",
    "Emmeline",
    "Gerladina",
    "Jsandye",
    "Alisun",
    "Cyril",
    "Sarajane",
    "Darrell",
    "Ingra",
    "Leoine",
    "Damita",
    "Evangelin",
    "Ashien",
    "Adams",
    "Garwood",
    "Odelle",
    "Ludovika",
    "Rollin",
    "Tuckie",
    "Kilian",
    "Erica",
    "Jan",
    "Georgeta",
    "Angelica",
    "Brear",
    "Tersina",
    "Shoshanna",
    "Emanuel",
    "Raoul",
    "Reube",
    "Minne",
    "Nolan",
    "Dalston",
    "Prince",
    "Adams",
    "Gavrielle",
    "Guillermo",
    "Wynne",
    "Elora",
    "Bron",
    "Julian",
    "Kellie",
    "Dre",
    "Andie",
    "Dode",
    "Thedrick",
    "Obidiah",
    "Filia",
    "Agnese",
    "Roseanna",
    "Leelah",
    "Melicent",
    "Delmor",
    "Archie",
    "La verne",
    "Monika",
    "Everett",
    "Monro",
    "Ruthe",
    "Michelle",
    "Abbot",
    "Robyn",
    "Sawyer",
    "Adiana",
    "Howie",
    "Mariellen",
    "Stanislaw",
    "Annnora",
    "Blancha",
    "Bobby",
    "Evita",
    "Miles",
    "Gerhardt",
    "Upton",
    "Katti",
    "Samaria",
    "Adele",
    "Claudian",
    "Fara",
    "Nathanil",
    "Jere",
    "Murry",
    "Ashla",
    "Joelie",
    "Farah",
    "Godiva",
    "Atlanta",
    "Balduin",
    "Rozina",
    "Frannie",
    "Sutton",
    "Elberta",
    "Robenia",
    "Bevan",
    "Dayle",
    "Suzy",
    "Luciano",
    "Gwenneth",
    "Donovan",
    "Debera",
    "Virgil",
    "Isabella",
    "Rusty",
    "Manfred",
    "Jo ann",
    "Costanza",
    "Emiline",
    "Danita",
    "Jessie",
    "Odille",
    "Christophe",
    "Jeno",
    "Putnam",
    "Emelita",
    "Kimbell",
    "Piotr",
    "Dicky",
    "Wake",
    "Georgina",
    "Olag",
    "Ricki",
    "Crista",
    "Evita",
    "Virgilio",
    "Jaine",
    "Garner",
    "Karita",
    "Elias",
  ];

  const [selectedItem, setSelectedItem] = useState("");

  return (
    <div style={{ width: "200px", maxHeight: "300px", overflowY: "scroll" }}>
      {items.map((item) => (
        <div
          key={item}
          style={{
            backgroundColor: `${selectedItem === item ? "#00adef" : ""}`,
            borderBottom: "1px solid #333",
          }}
          onClick={() => {
            setSelectedItem(item);
          }}
        >
          {item}
        </div>
      ))}
    </div>
  );
};