Props have different value for randomly generated ones in parent (react.js)

Weird behavior in React.js. When I am passing some randomly generated value in props. It is giving a different output in console logs.

While I debug it is again going back to App.js (Parent) and check its value but consoles are just 2, not 4.

What I am missing in react lifecycle or something here?

// App.js
function App() {
  const rand = Math.random();
  console.log(rand);
  return (
    <div className="App">
      <Board rand={rand} />
    </div>
  );
}

export default App;

// Board.js
function Board({ rand }){
    console.log(rand);
    return(
        <div className="Board"></div>
    );
}
export default Board;