tengo 2 archivos setter.jsx y 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 }; }

en algún lugar de setter.jsx

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

en activo.jsx

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

cuando se llama a setter() en setter.jsx , el estado cambia pero luego active.jsx sigue devolviendo el estado predeterminado. ¿Cómo puede active.jsx volver a renderizar y devolver el nuevo valor cada vez que se llama a setter en setter.jsx ?