input avec la selection du li en autocomplete

Bonsoir à tous je voudrait faire un input avec la sélection de la suggestion des d'un autocompense fait avec React. J'ai bien ma séléction mais je ne peut pas selectioner un uli pour la figé dans l'input. Dans mon css il y à du JS mais c'est pour React . 

Voici ce que cela donne, je ne peut donc pas figer la séléction dans mon input

Cordialement

Voici mon Css

import styled from 'styled-components';
 
export const Input = styled.input display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0.375rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; ;
 
export const Ul = styled.ul     display: contents; ;
 
export const Li = styled.ul position: relative; margin: 0; padding: 3px 1em 3px .4em; cursor: pointer; min-height: 0; } ;
 
export const SuggestContainer = styled.div            width: 242px;     overflow: scroll;     &::-webkit-scrollbar {         display: none;     }     -ms-overflow-style: none; /* IE and Edge */     scrollbar-width: none; /* Firefox */ ;

Et mon html

<div>
            <Input
                  
            />
            <SuggestContainer>
                <Ul>
                    <Li>Loading...</Li>
        </div>

<div>
           <Input
                 
           />
           <SuggestContainer>
               <Ul>
                     
               </Ul>
           </SuggestContainer>
       </div>

   Cordialement