Is there a way to clear the selected value on radix-ui's select component?

Question

I'm using radix-ui's select component to filter data on my reactjs app, but I was wondering how do I clear one selected value without having to refresh the page.

I tried to change the function that handle the changes to this below, but it never gets to that if condition. It's like the component totally ignores when the option doesn't change:

const handleChangeProject = (value) => {
    if( value === selectedProject){
      console.log("IM HERE")
      setSelectedProject(null);
    }else{
      setSelectedProject(value);
      console.log(value);
      setFilteredDocs(
        docs.filter((doc) =>
          doc?.project.toLowerCase().includes(value.toLowerCase())
        )
      );
    }
  };

Here's the radix-ui component in action:

<Select value={selectedProject} onValueChange={handleChangeProject}>
   <SelectTrigger className="w-[180px]">
       <SelectValue placeholder="Projects" />
   </SelectTrigger>
   <SelectContent>
       <SelectGroup>
           <SelectLabel>Projects</SelectLabel>
           {projects.map((project) => (
               <SelectItem
                  key={project.project_name}
                  value={project.project_name}
               >
                  {project.project_name}
               </SelectItem>
           ))}
       </SelectGroup>
    </SelectContent>
</Select>

Answer 1

I found an answer that works on the git repo for the library.

[resetKey, setResetKey] = useState<string>()
<Select.Root
  key={resetKey}
>
  {/* rest of select */}
</Select.Root>
const clearSelect = () =>
setResetKey(new Date().toISOString())