How can setState only after i got something to set without using promises

Question

So i was practicing some stuff and decided to make a color picker game. Not hard till i hit a problem of setting multiple states using useState hook, problem is that it takes some time to get a result from one of the functions but one of setStates executes before i get the result resulting in undefined. I solved the problem by using a useEffect hook but i was wondering if its possible to solve some other way. Here is a link to playground with a live sample:https://playcode.io/978607

   const getColor = () => {
    const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);

    return randomColor;
  };

  const generateColors = () => {
    const actualColor = getColor();
    setColor(actualColor);
    // setAnswers([color, getColor(), getColor()].sort(() => 0.5 - Math.random()));
  };

  useEffect(() => {
    generateColors();
  }, []);


  useEffect(() => {
    setAnswers([color, getColor(), getColor()].sort(() => 0.5 - Math.random()));
  }, [color]);