How to pass a hook state from one component to another in a axios function?

I’m trying to pass a hook state to another component inside the Axios function.
The state has the initial value to false, but when the method post happens to Axios, inside then()
I made the state to true which in this case is setShowFlagCreate(true)
Im trying to pass this state to the UserList.js component, but I don’t know-how.
After I pass it, I wanna use this state to show the flag(which says a user has been created.) on the UserList.js page

How can I do this?

UserCreate.js

export default function UserCreate({}) {

const [showFlagCreate, setShowFlagCreate] = useState(false)

const save = async () => {
    const { name } = formState;

    const UserParams = {
      userName:
        currentUser.signInUserSession
      Gender: gender,
      country: USA,
    };
 
    await axios
      .post(
        process.env.REACT_APP_API_STREAMING_URL + "user",
       userParams
      ) //posting the data into db 
      .then((response) => {
        navigate("/userlist");
        setShowFlag(true); //I want this state to pass it on the UserList component as true
      })
      .catch((error) => {
        // error
        console.log(error);
      });
  

    };
}
return(
  <div>
  </div>
)

UserList.js

export default function UserList() {

  const [showFlagCreate, setShowFlagCreate] = useState(false)

useEffect(() => {
    axios
      .get(process.env.REACT_APP_API_BACKEND_URL + "users" + usersParams) //geting the user form db
      .then((response) => {
        response.data.forEach(function (item) {
          let newUser = {
            id: user.id,
            name: Username,
            gender: "male",
            description: "stuff",
            status: "Ready",
          };
        });
      })
      .catch((error) => {
        // error
        console.log(error);
      });
  }, []);

  return (
    <div>
        <FlagCreate show={showFlagCreate} setShow={setShowFlagCreate}/> //passing the props
     </div>
);
}

I want to get the state in UserList component and show the flag since the state is true.

FlagCreat.js

export default function FlagCreate({ show, setShow }) {
 <div className="max-w-sm w-full bg-white shadow-colorLg rounded-lg pointer-events-auto overflow-hidden">
              <div className="p-4">
                    <CheckCircleIcon className="h-6 w-6 text-success" aria-hidden="true" />
                  </div>
                  <div className="ml-3 w-0 flex-1 pt-0.5">
                    <p className="text-sm font-medium text-primary">The userthat you have been created is saved.</p>

                  </div>
                  <div className="ml-4 flex-shrink-0 flex">
                    <button
                      className="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                      onClick={() => {
                        setShow(false)
                      }}
                    >
                      <span className="sr-only text-secondary">Close</span>
                      <XIcon className="h-5 w-5 text-secondary hover:text-txtlinkPrimary" aria-hidden="true" />
                    </button>
                    
                  </div>
}

The idea is that after the setShowFlagCreate turned to true in UserCreate.js , the flag has to be shown in the UserCreate component . How can I make it work?

>Solution :

What you should do is pass the state when calling navigation retrieve that state in the UserList.

UserCreate

navigate("/userlist", { state: { showFlag: true } });

UserList

const { state } = useLocation();
const { showFlag } = state; // use showFlag the way you want.

You can understand more how it works with this answer