[Solved]-JavaScript filter does not update the React local state-Reactjs

If you need to persist any of the state to localStorage to allow reloading the app then it appears you should persist the targetKeys state.

Example:

const App = () => {
  // Lazy state initializer function to load from localStorage
  // or fallback/default initial value
  const [targetKeys, settargetKeys] = useState(() => {
    return JSON.parse(localStorage.getItem("targetKeys")) || filteredGroups;
  });
  const [selectedKeys, setselectedKeys] = useState([]);

  // persist state updates to localStorage
  useEffect(() => {
    localStorage.setItem("targetKeys", JSON.stringify(targetKeys));
  }, [targetKeys]);

  const handleChange = (nextTargetKeys) => {
    settargetKeys(nextTargetKeys);
  };

  const handleSelectChange = (sourceSelectedKeys) => {
    setselectedKeys([...sourceSelectedKeys]);
  };

  return (
    <>
      <Transfer
        dataSource={DisplayItems}
        titles={["Source", "Target"]}
        targetKeys={targetKeys}
        selectedKeys={selectedKeys}
        onChange={handleChange}
        onSelectChange={handleSelectChange}
        render={(item) => item.title}
        oneWay
        style={{ marginBottom: 16 }}
      />
    </>
  );
};

When the component mounts you'll very likely want to refetch any data from your DBs to ensure you've the latest backend data, but if you needed any of this data at app start/mount then persist any other data/state your app/component needs.