setting useState by math.random is not working properly

I gave a number value to an image to display some images randomly

export default function Main() {
  const [topVar, setTopVar] = useState();
  const [bottomVar, setBottomVar] = useState();
  const [variable, SetVariable] = useState();

  const setVar = () => {
    setTopVar(Math.round(Math.random() * 7 + 1));
    setBottomVar(Math.round(Math.random() * 7 + 1));
    SetVariable(Math.round(Math.random() * 5 + 1));
  };

so if topVar is 1, it displays well in frontend

but when I post this to express server, it posts the next number which comes next of current number

  const save = () => {
    Axios.post("http://localhost:3001/save", {
      topVar: topVar,
      bottomVar: bottomVar,
      variable: variable,
      currentTime: currentTime,
      title: title,
    }).then((response) => {
      console.log(response);
    });
  };

is there anyway to setState only when I make an onClick event?