Hi everyone, how do you guys make sure that your facetFilters are not removed after you facet?

<Configure  facetFilters={[`company_unique_id:=${id}`]} />

Is what my configure loosk like, but when I use my filter facet component it resets that company_unique_id filter. Any tips on how to resolve this? Here is how:

function Refine(props: any) {
  const {
    items,
    hasExhaustiveItems,
    createURL,
    refine,
    sendEvent,
    searchForItems,
    isFromSearch,
    canRefine,
    canToggleShowMore,
    isShowingMore,
    toggleShowMore,
  } = useRefinementList(props);
  const dat: any = window.localStorage.getItem(props.attribute);
  const [f,setF] = useState<any>([])
  function persist(value: any) {
    
    refine(value);
  }
  useEffect(()=>{
    setF(JSON.parse(dat))
  },[props.change])
  useEffect(() => {
    
    
    //console.log(JSON.parse(dat));
    // if(dat!==null){
    //   console.log(JSON.parse(dat))
    //   refine(JSON.parse(dat).value)
    // }
    if (f !== null && f.length>0) {
      for (var x in f) {
      
        refine((f)[x].value);
      } 
    } 
  }, [f]);

  useEffect(() => {
    var savedArr: any = [];
    for (var x in items) {
      if (items[x].isRefined) {
        savedArr.push(items[x]);
      }
    }
   
    if (savedArr) {
      
      window.localStorage.setItem(props.attribute, JSON.stringify(savedArr));
    }
  }, [props]);
  return (
    <div>
      
      <div>
        <div className="flex flex-wrap  w-full">
          {items.map((item: any, i: any) => (
            <div key={i} className= "cursor-pointer hover:bg-slate-100 p-1 mr-4 hover:rounded-md">
              <label
                key={i}
                typeof="button"
                
                className="flex items-center  cursor-pointer group-hover:bg-slate-100  rounded-md group "
                onChange={() => persist(item.value)}
              >
                <input
                  readOnly={true}
                  type="checkbox"
                  checked={item.isRefined}
                  className="form-checkbox cursor-pointer "
                />
                <span
                  className={
                    item.isRefined == false
                      ? "text-sm text-slate-600 ml-2 hover:text-black group-hover:font-bold"
                      : " text-black font-semibold text-sm ml-2"
                  }
                >
                  {item.label}
                  <span className="ml-2 text-xs border px-1.5 py-0.5 rounded-lg font-semibold bg-white text-[#8493A0]  border-1  border-solid border-slate-300">
                    {item.count}
                  </span>
                </span>
              </label>
            </div>
          ))}
        </div>
      </div>
      
    </div>
  );
}

export default Refine;

I handle the facet component.