how to show only the result of the selection?

my current code shows a complete list of clinics, when in the selector I choose a province, it shows me the clinics located in that province, what I would like is not to show the complete list of clinics at the beginning but only show the result when filtering by province. That is to say, when starting the application that only the selection is seen and once the province is selected, the results will be shown.

import React, { useState, useEffect } from 'react'
import Select, { SingleValue } from 'react-select'
import { getClinic } from '../../api/drupalAPI'
import {Clinic} from '@icofcv/common';


export const SearchFilterClinics = () => {

         ////filter

         type OptionType = {
            value: string;
            label: string;
          };
    
          
            const provincesList: OptionType[] = [
                { value: 'Todos', label: 'Todos' },
                { value: 'Alava/Araba', label: 'Alava/Araba' },
                { value: 'Albacete', label: 'Albacete' },
                { value: 'Alicante', label: 'Alicante' },
                { value: 'Almería', label: 'Almería' },
                { value: 'Avila', label: 'Avila' },
                { value: ' Badajoz', label: ' Badajoz' },
                { value: 'Islas Baleares', label: 'Islas Baleares' },
                { value: 'Barcelona', label: 'Barcelona' },
                { value: 'Burgos', label: 'Burgos' },
                { value: 'Cáceres', label: 'Cáceres' },
                { value: 'Cádiz', label: 'Cádiz' },
                { value: 'Castellón', label: 'Castellón' },
                { value: 'Ciudad Real', label: 'Ciudad Real' },
                { value: 'Córdoba', label: 'Córdoba' },
                { value: 'A Coruña/La Coruña', label: 'A Coruña/La Coruña' },
                { value: 'Cuenca', label: 'Cuenca' },
                { value: 'Gerona/Girona', label: 'Gerona/Girona' },
                { value: 'Granada', label: 'Granada' },
                { value: 'Guadalajara', label: 'Guadalajara' },
                { value: 'Gipuzkoa/Guipuzcoa', label: 'Gipuzkoa/Guipuzcoa' },
                { value: 'Huelva', label: 'Huelva' },
                { value: 'Huesca', label: 'Huesca' },
                { value: 'Jaen', label: 'Jaen' },
                { value: 'León', label: 'León' },
                { value: 'Lérida/Lleida', label: 'Lérida/Lleida' },
                { value: 'La Rioja', label: 'La Rioja' },
                { value: 'Lugo', label: 'Lugo' },
                { value: 'Madrid', label: 'Madrid' },
                { value: ' Málaga', label: ' Málaga' },
                { value: 'Murcia', label: 'Murcia' },
                { value: 'Navarra', label: 'Navarra' },
                { value: 'Orense/Ourense', label: 'Orense/Ourense' },
                { value: 'Asturias', label: 'Asturias' },
                { value: 'Palencia', label: 'Palencia' },
                { value: 'Las Palmas', label: 'Las Palmas' },
                { value: 'Pontevedra', label: 'Pontevedra' },
                { value: 'Salamanca', label: 'Salamanca' },
                { value: 'S.C.Tenerife', label: 'S.C.Tenerife' },
                { value: 'Cantabria', label: 'Cantabria' },
                { value: 'Segovia', label: 'Segovia' },
                { value: ' Sevilla', label: ' Sevilla' },
                { value: 'Soria', label: 'Soria' },
                { value: 'Tarragona', label: 'Tarragona' },
                { value: 'Teruel', label: 'Teruel' },
                { value: 'Toledo', label: 'Toledo' },
                { value: 'Valencia', label: 'Valencia' },
                { value: 'Valladolid', label: 'Valladolid' },
                { value: 'Bizkaia/Vizcaya', label: 'Bizkaia/Vizcaya' },
                { value: 'Zamora', label: 'Zamora' },
                { value: 'Zaragoza', label: 'Zaragoza' },
                { value: 'Ceuta', label: 'Ceuta' },
                { value: 'Melilla', label: 'Melilla' },
               
            ]

    const [clinicList, setClinicList] = useState<Clinic[]>([]);
    const [clinicListFilteredSelect, setClinicListFilteredSelect] = useState<Clinic[]>([]);
    const [filterSelectClinic, setFilterSelectClinic] = useState<SingleValue<OptionType>>(provincesList[0]);
    
    
    const fetchClinicList = async () => {
        getClinic().then((response)=>{
            console.log(response)
            setClinicList(response);
            setClinicListFilteredSelect(response)
        }).catch ( (error)  => {
            console.error(error);
            throw error;
        });
    }
                                         
                                   

      const handleChangeSelect = (provinceList: SingleValue<OptionType>) =>{
         console.log(provinceList)
         setFilterSelectClinic(provinceList);
         filterSelect(provinceList );
      }

       
      const filterSelect=(termSearch)=>{
        const resultFilterSelect = clinicList.filter((element) => {
          if(element.province?.toString().toLowerCase().includes(termSearch.value.toLowerCase() )
        
          ){
            return element;
          }
        });
        setClinicListFilteredSelect(resultFilterSelect);
      }

      useEffect (() => {
        fetchClinicList();  
    }, []);

   

    return  (
                <>
                    <div>
                        <h1>Encuentra tu clínica</h1>
                    </div>
                        <div>

                                <Select 
                                    defaultValue={filterSelectClinic}
                                    options={provincesList}
                                    onChange={handleChangeSelect}
                                    
                                    />



                                {
                                    clinicListFilteredSelect.map((clinic) => (
                                        <div>
                                            <div>{clinic.title}</div>
                                            <div>{clinic.propsPhone}</div>
                                            <div>{clinic.mobile}</div>
                                            <div>{clinic.email}</div>
                                            <div>{clinic.province} </div>
                                            <div>{clinic.registry}</div>
                                        </div>
                                    ))
                                }
                            </div>

                          
                </>
            )
}