useState with props correct way

App.js

import React from "react";

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

  React.useEffect(() => {
    setState(num);
  }, [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;