i have 2 files setter.jsx and active.jsx

setter.jsx

function SetState() {
  const [State, setState] = useState("default state");

  const setter = (options) => {
    setState(options);
  };

  const getter = () => {
    return State;
  };

  return { State, setter, getter };
}

somewhere in setter.jsx

const {setter} = SetState();
setter(options);

in active.jsx

import {SetState} from "setter";
const {State} = SetState();
return {State};

when the setter() is called in setter.jsx, the state is changed but then active.jsx keeps returning the default state. how can active.jsx re-render and return the new value whenever setter is called in setter.jsx?