Custom multi select with input field in React js?

   const [geography, setGeography] = useState([]);
   const [toggleSuggestBox, setToggleSuggestBox] = useState(false);
   const [geographyText, setGeographyText] = useState('');

 // open search text wise drop down content (suggest box ) 
 const geographyChangeHandler = (e) => {

        setGeographyText(e.target.value);
        setToggleSuggestBox(true);

        //here countries is fake json where i put all the country name as label
        const filterCountry = Countries?.filter((item) => item.label.toLowerCase().includes(e.target.value.toLowerCase( 
        )));
        setGeographySuggest(filterCountry);
    }

    // add geography using suggest click
    const handleSuggestClick = (item) => {
        setGeographyText('')
        setGeography([...geography, item]);
        setGeographySuggest([])
        setToggleSuggestBox(false);

    }

    //remove geography from geography array  
    const removeGeographyHandler = (item) => {
        console.log(item, "click for remove an item");

        const filterData = geography.filter(country => country !== item);
        console.log(filterData, "test filter data ")
        setGeography(filterData);

    }

<div className='geography'>
    <label>Countries Allowed</label>
{/* how to do it manually  */}

    <div className='multi-select-sections'>

          <input name='geography'
                 value={geographyText}
                 type="text"
                 onChange={geographyChangeHandler}
               />

      {geographySuggest.length > 0 && (
            <div className="suggest-box"
              style={{ display: toggleSuggestBox && geographyText.length > 0 ? "flex" : "none" }}>
             <div>{geographySuggest?.slice(0, 10).map((country, index) => (
       <button key={index}                                               className="suggest-box-search-btn"
onClick={() => handleSuggestClick(country.label)}>

     <span className="suggest-box-line-climb">
          {country.label}
     </span>
      </button>
      ))}
 </div>
     </div>
 )}
{
     geography?.map((item, index) => (
      <div key={index} className='single-item'>
               <span className='country-name'>{item}</span>
               <span className='geography-cross' onClick={() => removeGeographyHandler(item)}>x</span>
     </div>
     ))
 }

</div>

</div>

.geography {
    margin: 10px 0;
    position: relative;
    display: flex;
    label {
          width: 120px;
         }
    .multi-select-sections {
           border: $border-color;
           width: 300px;
           min-height: 40px;
           overflow: hidden;
           display: flex;
           align-items: center;
           flex-wrap: wrap;
           gap: 10px;
           padding: 5px;
           .single-item {
              display: flex;
              background: #e6e6e6;
              overflow: hidden;
              align-items: center;
              border-radius: 6px;

              .country-name {
                   font-size: 14px;
                   padding: 0px 5px;
               }

               .geography-cross {
                   font-size: 18px;
                   padding: 2px 5px;
                   cursor: pointer;
                     &:hover {
                       background-color: #ffbdad;
                       color: #de350b;
                       }
                 }
           }
           input {
              padding: 3px;
              width: 100vw;
              height: 28px;
              border: none;
               &:focus {
                  border: 1px solid #0048ba;
                }
               &:hover {
                   border: 1px solid #0048ba;
                }
           }
         .suggest-box {
              position: absolute;
              width: 65%;
              left: 118px;
              top: 26px;
              z-index: 9999999;
              background-color: #fff;
              box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 21%);
              margin-top: 5px;
              border-radius: 3px;
              padding: 15px 20px;
              max-height: 300px;
              overflow-y: auto;
              flex-direction: column;

              .suggest-box-search-btn {
                   width: 100%;
                   display: flex;
                   align-items: center;
                   gap: 10px;
                   height: 40px;
                   outline: none;
                   background: transparent;
                   text-align: left;
                   font-size: 14px;
                   font-family: "Open Sans", sans-serif;
                   border: none;
                   border-bottom: 1px solid #eaeaea;

                      &:hover {
                         color: $primary-color;
                         transition: 0.5s;
                 }
                  .suggest-box-line-climb {
                         display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                    }
                }
          }
      }
}