React useState not showing changes [duplicate]

I have a very large component, so I’ll try to show a portion of the code below that is important. But, essentially, when I attempt to remove a filter via a custom function that calls useState() I can see, via the console, that the state does indeed change, but the changes don’t present themselves.

const DraftClassExplorerHeader: React.FC<{ selectedFilters: any[] }> = (
  props
) => {
  let [selectedFilters, setSelectedFilters] = React.useState<any[]>(
    props.selectedFilters
  );
  let globalState = React.useContext(DraftClassExplorerContext);
  React.useEffect(() => {
    setSelectedFilters(props.selectedFilters);
  }, [props.selectedFilters]);

  const removeFilter = (c: number) => {
    let temp = selectedFilters;
    temp.splice(c, 1);
    globalState.setSelectedFilters(temp);
  };
....

I’ve tried using useEffect() within the removeFilter function, but React is not a fan of that it seems. Any help greatly appreciated.

Edit: my question is definitely different from the proposed duplicate because I am asking explicitly about using React hooks here.