Need advice regarding redux form. How to add an onBlur event to two tags?

Question

React

For practice, I write a search for countries
. I have a SearchForm component that has an input where you need to enter the names of countries. With each input, onChange fires and a list of countries is displayed under this input. This list consists of NavLinks, when you click on the corresponding navlink, information about the country should be displayed. But I also want this list to disappear when I click anywhere except the form and the list itself, for this I added an onBlur event to the input and hide this list using css, but because of this I can’t click on the list itself, because that he immediately disappears. Can you please give advice on what to do in this case))
Here is the code:

import React, { useState } from "react";
import { NavLink } from "react-router-dom";
import { Field, reduxForm } from "redux-form";
import styles from "./SearchPage.module.css";

const Search = (props) => {
    
    let countryList = [];
     let [classes, setClasses] = useState({activeFocusForm: null, activeList: null});
    if (props.countries.length > 0) {
        countryList = props.countries.map((item) => <NavLink to={`/${item.properties.name}`} className={styles.countryItem}>{item.properties.name}</NavLink>)
    } else {
        countryList = <div className={styles.nothingFound}>Nothing found</div>
    }
    const countrySearch = (event, newValue) => {
        props.getCountries(newValue);
        setClasses({activeFocusForm: "focusActive", activeList: "listCountry"})
    }
    
    return (
        <>
            <h1>City Search</h1>
            <div className={styles.searchWrapper}>
                <SearchReduxForm 
                countrySearch={countrySearch} 
                activeFocusForm={classes.activeFocusForm} 
                onBlur={() => {
                    setClasses({activeFocusForm: null, activeList: "listCountryDisabled"})
                }} 
                onFocus={() => {setClasses({activeFocusForm: "focusActive", activeList: "listCountry"})}}/>
                <div className={styles[classes.activeList]}>{countryList}</div>
            </div>
        </>
    )
}

const SearchForm = (props) => {
    return (
        <form className={styles.decor} >
            <div className={styles.formInner + " " + styles[props.activeFocusForm]}>
                <Field 
                autocomplete="off" 
                placeholder="Enter the name of the city" 
                component="input" 
                name="search" 
                onChange={props.countrySearch} 
                // onBlur={props.onBlur} 
                onFocus={props.onFocus}/>
            </div>
            
        </form>
    )
}


const SearchReduxForm = reduxForm({ form: "search" })(SearchForm);
export default Search;

Answer 1

https://www.30secondsofcode.org/react/s/use-click-...