Using a constant random variable in a randomly generated component

I am building a solar system app that automatically generates stars. My stars are a React component that accept a couple of props. When the user clicks the star, I need the system state to update and also I want the navlink to point to the same value.

let randomTypeVariable = starList[Math.floor(Math.random() * 6 + 1)];
      return (
        <NavLink
          to={`/${randomTypeVariable}`}
          onClick={() => props.setSystem(`${randomTypeVariable}`)}
          className="starWrapper"
        >

However at the moment the to= prop and the onClick function are giving different results. I know that this is because the randomTypeVariable is running each time and giving different results.

These components are being randomly generated so I cannot have the variable be a constant value.
How can I assign both of these properties to be the same randomly generated variable?

For context here is the full star component

let randomTypeVariable = starList[Math.floor(Math.random() * 6 + 1)];
  const makeStars = (Count = 5) => {
    if (Count > 0) {
      return (
        <NavLink
          to={`/${randomTypeVariable}`}
          onClick={() => props.setSystem(`${randomTypeVariable}`)}
          className="starWrapper"
        >
          <Star
            starName={`${makeStarName()}`}
            starPosition={positionList[Math.floor(Math.random() * 9 + 1)]}
            starType={`${starList[Math.floor(Math.random() * 6 + 2)]}`}
          ></Star>
          {makeStars(Count - 1)}
        </NavLink>
      );
    }
  };