How to render different data on dropdown selection using Material's UI Select?

Question

The Select component is filled with correct data by default but when I try to select the "InReview" option, the options inside the statusArr should be displayed and remove the previous ones.

Thanks in advance.

My code:

function OperationalOurCustomer() {
    const statusArr = ["Completed", "Not-Reachable", "Canceled","Rejected"];
    const [appStatus, setAppStatus] = useState("Entry");

    const onStatusChange = (e) => {
        e.preventDefault();
        e.stopPropagation();
        var status = e.target.value;
        if (status === "InReview") {
            setAppStatus(status);
            return (
             <FormControl>
              <Select
                variant="outlined"
                value={appStatus}
                onChange={onStatusChange}
               >
                <MenuItem value="InReview">InReview</MenuItem>
                {statusArr.map((status) => (
                  <MenuItem key={status} value={status}>
                   {status}
                  </MenuItem>
                 ))}
               </Select>
             </FormControl>
            ) 
        }
    };

    return ( 
       <div className="appStatus"> 
        <p>Application Status:</p>
        <FormControl>
         <Select
          variant="outlined"
          value={appStatus}
          onChange={onStatusChange}
         >
          <MenuItem value="Entry">Entry</MenuItem>
          <MenuItem value="InReview">InReview</MenuItem>
         </Select>
        </FormControl>
       </div>
    )
}

Answer 1

For anyone facing the same issue I found another solution to this problem. Instead of checking the status from the event, check it directly from the hook itself(appStatus === "InReview"). Also in order to function correclty I made some refactoring:

function OperationalOurCustomer() {
  const [appStatus, setAppStatus] = useState("Entry");

  const onStatusChange = (e) => {
    setAppStatus(e.target.value);
  };

  const loadStatuses = () => {
    if (appStatus === "InReview") {
      return (
        <FormControl>
          <Select
            variant="outlined"
            value={appStatus}
            onChange={onStatusChange}
          >
            <MenuItem value="InReview">InReview</MenuItem>
            {statusArr.map((status) => (
              <MenuItem key={status} value={status}>
                {status}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      );
    } else if (appStatus === "Entry") {
      return (
        <FormControl>
          <Select
            variant="outlined"
            value={appStatus}
            onChange={onStatusChange}
          >
            <MenuItem value="Entry">Entry</MenuItem>
            <MenuItem value="InReview">InReview</MenuItem>
          </Select>
        </FormControl>
      );
    } else {
      return (
        <FormControl>
          <Select
            variant="outlined"
            value={appStatus}
            onChange={onStatusChange}
          >
            <MenuItem value={appStatus}>{appStatus}</MenuItem>
          </Select>
        </FormControl>
      );
    }
  }

  render (
    <div className="appStatus">
          <p>Application Status:</p>
          {loadStatuses()}
    </div>
  )
}