getDerivedStateFromProps и setTimeOut

export default class App extends React.Component{
    constructor(props){
        super(props)
         ...
          
        this.state={
             ... 
            topActionPreloader: false,
     
        }
 
        ...
        render(){
         
            return (
            <div className="App">
                 <TopActionPreloader status={this.state.topActionPreloader} />
               ...
             </div>
            ) 
    }
    }

export default class TopActionPreloader  extends React.Component{
    
    constructor(props){
            super(props) 
            this.state =  {
                status: props.status, 
            };  
    }
    
   
    
    static getDerivedStateFromProps(props, state) { 
        return {
            status: props.status,  
          };
      }
     ...
 
}

const TopActionPreloader = props => {
  const [status, setStatus] = useState(props.status || 'initial');
  useEffect(() => {
    setStatus(props.status);
    if (props.status === 'complete') setTimeout(() => setStatus('false'), 1000);
  }, [props.status]);
  return status;
};
 
const App = () => {
  const [status, setStatus] = useState('initial');
  return (
    <div>
      <button
        onClick={() => {
          if (status === 'initial') setStatus('complete');
          else setStatus('initial');
        }}
      >
        Click me
      </button>
      <TopActionPreloader status={status} />
    </div>
  );
};