How to make a search filter in svelte

I have two components that are very far away in the component tree and I have doubts about how to communicate between both. I have the search component, listItems and a store.

store.svelte

<script context="module" lang="ts"> import type {Items} from '../../Models/Items.model'; import { writable } from 'svelte/store'; export const dataItems = writable<Items[]>([]);  const filterInfo = (term:string) => {     dataItems.update(item => {           item.filter(x => {                return x.name.toLowerCase().includes(term.toLowerCase())                || x.description.toLowerCase().includes(term.toLowerCase());           })           return dataItems;        })    }*/export const dispatcher = {filterInfo};</script>

search component

<script lang="ts">    import { dispatcher } from './ViewI/store.svelte';    let value:any;    const handleChange = () => {     dispatcher.filterInfo(value)    console.log(value)     }</script><Search><input bind:value on:input={handleChange}></Search>

listItems component

import type {Items} from '../../Models/Items.model';import {dataItems,dispatcher} from './store.svelte';export let items:Items[] =[];export let value:any;$:filterItems = items;$: {  filterItems = $dataItems.filter((item:any) => {    return item.name  || item.description  });  dispatcher.filterInfo(value); }</script><main>      {#each [...filterItems] as item }<CardItems              name={item.name}              description={user.description}              id={item.id}            />            {/each}</main>

The question is how to communicate both components with the value that you write in the input and make the filter.