Implementing a cube that naturally floats in the viewport - change x, y position of cube in animate()

Question

The code sandbox example below is the code that puts a cube made of BoxGeometry on the canvas and calls animate() every frame.
The problem is the x,y coordinates inside animate(), now it rotates in a circle.
What I want is to move a little bit randomly around the current x,y. It would be better to go with a curve rather than a straight line. ofcouse It should not be outside in viewport!
When I tried to apply Math.random() to the current code, the cube moved like crazy.

https://codesandbox.io/s/wandering-browser-ch28uv?file=/src/Canvas.tsx:2780-2788

 //inside animate()
 cube.position.x = Math.cos(elapsedTime) * 3;
 cube.position.y = Math.sin(elapsedTime) * 2;