Functional component is not Re-rendering

Question

Here is my code for calling the component When is_new becomes true this component got called but I need to recall the component when errors comes so I make the reload state true at that time but the component didn't call. I need to pass the error to that component after response.

  const [reload, setReload] = useState(false);


api
    .addleads(jsonToFormData(data, taskStates))
    .then((response) => {
      if (response.status === 201 || response.status === 200) {
        if (response.data.data) {
          updatedCitiesAreas(response.data.data);
        }
        setLoading(false);
        setExistingClientform(existingclientInitial);
        setClients({
          column: "",
          value: "",
        });
        toastr["success"]("Lead Added Successfully!");
        setErrors([]);
       
    })
    .catch((error) => {
      setLoading(false);

      if (error.response.data.errors) {
        setErrors(error.response.data.errors);
        setReload(true);
      }

    });


{state.is_new || reload ? (
                  <AddClientDetails
                    status="searchClient"
                    loader
                    clientForm={clientCheck}
                    errors={errors}
                    leadid={props.leadid}
                    numberStatus={numberStatus}
                  />
                ) : (
                  ""
                )} 

Following is response