React onclick update to state is not a function

Question

I have a component A, which displays contents of a component B conditionally. Component B is contains a list of items, and when one clicks one of the items in the list, a new layout is supposed to be fired up showing details of the item. When i try to pass the props to switch to a new layout on a component B list item, i get an error toggleSearchType is not a function . Any assistance or recommendation on what i might be doing wrong will be appreciated. My index file looks like this :

const PatientSearch: React.FC<PatientSearchProps> = ({ closePanel }) => {
  const { t } = useTranslation();
  const [searchType, setSearchType] = useState<SearchTypes>(SearchTypes.BASIC);

  const toggleSearchType = (searchType: SearchTypes) => {
    setSearchType(searchType);
  };

  return (
    <>
      <Overlay header={t('addPatientToList', 'Add patient to list')} closePanel={closePanel}>
        <div className="omrs-main-content">
          {searchType === SearchTypes.BASIC ? (
            <BasicSearch toggleSearchType={toggleSearchType} />
          ) : searchType === SearchTypes.ADVANCED ? (
            <PatientScheduledVisits toggleSearchType={toggleSearchType} />
          ) : searchType === SearchTypes.SCHEDULED_VISITS ? (
            <AdvancedSearch toggleSearchType={toggleSearchType} />
          ) : null}
        </div>
      </Overlay>
    </>
  );
};

The searchtypes are as below :

export enum SearchTypes {
  BASIC = 'basic',
  ADVANCED = 'advanced',
  SCHEDULED_VISITS = 'scheduled-visits'
}

My component A looks like this :

import React, { useEffect, useMemo, useState } from 'react';

interface BasicSearchProps {
  toggleSearchType: (searchMode: SearchTypes) => void;
}

const BasicSearch: React.FC<BasicSearchProps> = ({ toggleSearchType }) => {
  const { t } = useTranslation();
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResults, setSearchResults] = useState<any>(null);
  const customRepresentation = '';

  return (
    <div className={searchResults?.length ? styles.lightBackground : styles.resultsContainer}>
      {searchResults?.length ? (
        <div className={styles.resultsContainer}>{<SearchResults toggleSearchType={searchResults}  patients={searchResults} />}</div>
      ) : (
        <div>
          <div className={styles['text-divider']}>{t('or', 'Or')}</div>
          <div className={styles.buttonContainer}>
            <Button
              kind="ghost"
              iconDescription="Advanced search"
              renderIcon={Search16}
              onClick={() => toggleSearchType(SearchTypes.ADVANCED)}>
              {t('advancedSearch', 'Advanced search')}
            </Button>
          </div>
        </div>
      )}
    </div>
  );
};

export default BasicSearch;

Component B looks like this :

interface SearchResultsProps {
  patients: Array<any>;
  hidePanel?: any;
  toggleSearchType: (searchMode: SearchTypes) => void;
}

function SearchResults({ patients, toggleSearchType }: SearchResultsProps ) {
    const fhirPatients = useMemo(() => {
      return patients.map((patient) => {
        const preferredAddress = patient.person.addresses?.find((address) => address.preferred);
      });
    }, [patients]);
  
    return (
      <> 
        {fhirPatients.map((patient) => (
          <div key={patient.id} className={styles.patientChart} onClick={() => toggleSearchType(SearchTypes.SCHEDULED_VISITS)} >
            <div className={styles.container}>
              <ExtensionSlot
                extensionSlotName="patient-header-slot"
                state={{
                  patient,
                  patientUuid: patient.id,
                  // onClick: onClickSearchResult,
                }}
              />
            </div>
          </div>
        ))}
      </>
    );
  }
}