Collision of two geometries | R3F

I want my models not to overlap with each other. see this example
I want to make models rigid for each other like they should not overlap each other or go through each other, how can I achieve this. Someone suggested me to use @react-three/cannon but I don’t know where to start from.