useState with props Wrong way

App.js

import React from "react";

const Box = ({ num }) => {
    const [state, setState] = React.useState(num);

    return <div>child state ${state}</div>;
};

const App = () => {
    const [state, setState] = React.useState();

    return (
        <div className="App">
            <h1>Hello CodeSandbox</h1>
            <button onClick={() => setState(Math.random(10))}>Click Me</button>
            <div>parent state: {state}</div>
            <Box num={state} />
        </div>
    );
};
export default App;