why state is undefine on first click on button

I want to get Error state from Redux store but when I click on the button it says undefined but after second click it shows error msg the state is coming from Redux store and the error is showing in HTML part of the component but not showing on button click.is there a way to handle this.I ma stuck on this from 3 days.

const { createsponsors, error } = props;
  const handleSubmit = () => {
    createsponsors(data);
    console.log("Error", error?.message); //here it says undefined on first click on second click it shows error msg
  };
 return (
    <>
      <div className={style.shadow}>
        <center>
          <h1>Create Sponosor</h1>
          <br></br>
          <div>
            {error ? (
              <div className="alert alert-danger" role="alert">
                <b>{error?.name} </b> // Error showing here 
                {error?.message}
              </div>
            ) : (
            
            )}
          </div>

          <br></br>
        </center>
        <div className="row">
          <div className="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12">
            <div className={style.btncenter}>
              <img
                src={data.image_link}
                className={style.SponsorForm_image}
                alt="Brand Img"
              ></img>
            </div>
            <br></br>
            <div className={style.btncenter}>
              <input
                type="file"
                ref={ref}
                className={style.disnone}
                onChange={(e) => handleSelectImage(e.target.files[0])}
              ></input>
              <Button variant="dark" onClick={handleClick}>
                Select
              </Button>
            </div>
          </div>
          <div className="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
            <div className="form-group">
              <input
                placeholder="Title"
                type="text"
                className="form-control"
                onChange={({ target: { value } }) => {
                  handlechnagesponsors("title", value);
                }}
              />
            </div>
            <div className="form-group">
              <textarea
                placeholder="Description"
                type="text"
                className="form-control"
                onChange={({ target: { value } }) => {
                  handlechnagesponsors("description", value);
                }}
              ></textarea>
            </div>
            <div className="form-group">
              <div className="input-group">
                <input
                  placeholder="Add member benefit"
                  className="form-control"
                  value={addbenifit}
                  onChange={(e) => {
                    setAddBenifit(e.target.value);
                  }}
                />
                <button
                  type="button"
                  onClick={() => AddBenifits("add")}
                  className={`${style.btnspaceupdate} btn btn-dark`}
                >
                  Add
                </button>
              </div>
              <br></br>

              <div className="form-group">
                <center>
                  <h2>Member Benifits</h2>
                </center>
                {data.member_benifits?.map((val, index) => {
                  return (
                    <div key={index}>
                      <div className="input-group">
                        <input
                          className="form-control"
                          value={val}
                          defaultValue={val}
                          type="text"
                        />
                        <button
                          type="button"
                          className={`${style.btnspaceupdate} btn btn-dark`}
                          onClick={() => {
                            AddBenifits("delete", index);
                          }}
                        >
                          Delete
                        </button>
                      </div>
                      <br />
                    </div>
                  );
                })}
              </div>

              <div className="form-group">
                <div className="form-row">
                  <div className="form-group col">
                    <input
                      placeholder="Weblink"
                      type="text"
                      className="form-control"
                      onChange={({ target: { value } }) => {
                        handlechnagesponsors("webLink", value);
                      }}
                    />
                  </div>
                  <div className="form-group col">
                    <input
                      placeholder="Contact"
                      type="text"
                      className="form-control"
                      onChange={({ target: { value } }) => {
                        handlechnagesponsors("contact", value);
                      }}
                    />
                  </div>
                </div>
                <div className="form-group">
                  <input
                    placeholder="Priority"
                    min="1"
                    type="number"
                    className="form-control"
                    onChange={({ target: { value } }) => {
                      handlechnagesponsors("priority", value);
                    }}
                  />
                </div>
                <div className={`${style.btncenter} form-group`}>
                  <Button
                    type="button"
                    variant="dark"
                    disabled={clicked}
                    onClick={() => {
                      handleSubmit();
                    }}
                  >
                    Create Sponosor
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <ToastContainer autoClose={2000} />
      </div>
    </>
  );
const mapStateToProps = (state) => {
  const { sponsorsDataReducer } = state;
  return {
    isFetching: sponsorsDataReducer.isFetching,
    error: sponsorsDataReducer.error,
    sponsor: sponsorsDataReducer.sponsor,
  };
};
const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({ createsponsors }, dispatch);
};

Reducer

import ACTION from "../actions/actionTypes";
a
const initialState = {
  sponsor: [],
  isFetching: false,
  error: null,
};
export default function (state = initialState, action) {
  switch (action.type) {
    case ACTION.CREATE_SPONSORS_REQUEST: {
      return {
        ...state,
        isFetching: true,
        error: null,
      };
    }
    case ACTION.CREATE_SPONSORS_RESPONSE: {
    

      return {
        ...state,
        isFetching: false,
        sponsor: action.data,
        error: null,
      };
    }
    case ACTION.CREATE_SPONSORS_ERROR: {
      return {
        ...state,
        isFetching: false,
        error: action.error,
      };
    }

    default: {
      return state;
    }
  }
}

Action

export const createsponsors = (data) => {
  return {
    type: ACTION.CREATE_SPONSORS,
    data: data,
  };
};

Saga

import { put, call } from "redux-saga/effects";
import ACTION from "../actions/actionTypes";
import { apiCreateSponsor } from "../../Api/apiController";


export function* createNewSponsor(action) {
  yield put({ type: ACTION.CREATE_SPONSORS_REQUEST });
  try {
    const { data } = yield apiCreateSponsor(action.data);
  
    yield put({
      type: ACTION.CREATE_SPONSORS_RESPONSE,
      data: data,
    });
 
    yield call(forward, "/sponsors");
  } catch (e) {
    yield put({ type: ACTION.CREATE_SPONSORS_ERROR, error: e.response.data });
  }
}
const forward = (location) => {
  window.top.location.href = `/files/admin/#${location}`;
};