Better understand debounceTime (RXJS) for an API request - reactjs

Question

I'm trying to create a search engine (input) where each time a user starts typing, it'll wait a bit before sending a query call. From my understanding, we would import
import { of } from "rxjs";
import { debounceTime } from "rxjs/operators";
The purpose of using of is because we will be using a string. As for debounceTime, we want to only process (make a request) to the last input that has been written in the set amount of time we pick. For this implementation, the way I have it set is
const PostTypeSelection = ({ client }) => {
const [search, updateSearch] = useState("");
const [tags, updateTags] = useState([]);
const searchObserver = of(search);
const handleChange = e => {
const { value } = e.target;
updateSearch(value);
searchObserver
.pipe(
debounceTime(1000),
distinctUntilChanged()
)
.subscribe(x => console.log("we run query here", x));
}
return (
<div>
<p>Select tags you'll want to see</p>
<input
type="text"
name="search"
placeholder="Type tag name"
onChange={handleChange}
/>
{tags.map(tag => {
return (
<div key={tag.id}>
{tag.name} ({tag.count})
</div>
);
})}
</div>
);
};
My main question is what is wrong with my implementation? There is no delay when I start typing and the console.log get run immediately. Another problem I noticed is if I tried to use delay, it doesn't remove previous request just sends them all after a set amount of time.
All help is appreciated especially in better understanding how to use an Observer and better understand the right use of debounceTime

Answer 1

Take what I am going to say with a grain of salt. I am not a Rxjs developer (being honest I have never used the lib 🙂) but I get the concepts.
I see two problems in you implementation:
For every keypress you are creating and new observer and subscripting to it, because all the pipe and subscribe code is in the handler.
From what the documentation says about of, it emits the provided values in a sequence. For example: of(1,2,3,3). Here I don't think you have a sequence. Every time you update the state the whole function runs resulting in of begin called once with every value: of('a'), of('ab'), of('abc'), not of('a', 'ab', 'abc').
This is what I did to make it work:
const PostTypeSelection = ({ client }) => {
const [tags, updateTags] = useState([]);
const searchObserver = new Subject().pipe(
debounceTime(1000),
distinctUntilChanged()
);
searchObserver.subscribe(x => console.log("we run query here", x))
const handleChange = e => {
const { value } = e.target;
searchObserver.next(value)
}
return (
<div>
<p>Select tags you'll want to see</p>
<input
type="text"
name="search"
placeholder="Type tag name"
onChange={handleChange}
/>
{tags.map(tag => {
return (
<div key={tag.id}>
{tag.name} ({tag.count})
</div>
);
})}
</div>
);
};