Walls with CuboidCollider not work as expected

Questions
, , ,
1

Hello I have this code which represent walls on all the screen edges my problem is always the object inside it when they collide each other the object go outside it so how to fix this

function BorderWalls() {
    const {size} = useThree() // Adjust this according to your scene size
   const walls = [
              { position: [0, size.height /2, -1], size: [size.width, 1, 1] }, // Bottom wall
              { position: [0, - size.height /2, 1], size: [size.width, 1, 1] }, // Top wall
              { position: [-size.width /2, 0, 0], size: [1, size.height, 1] }, // Left wall
              { position: [size.width / 2, 0, 0], size: [1, size.height, 1] }  // Right wall
      ];
    return (
        <>
            {walls.map((wall, index) => (
                <RigidBody key={index} type="fixed" >
                    <CuboidCollider  args={wall.size} position={wall.position} />
                </RigidBody>
            ))}
        </>
    );
}

the objects that go outside the walls is

function Sphere({ radius,image, scale, text, vec = new THREE.Vector3(), ...props }) {
    const api = useRef()
    const initialPos = useMemo(() => [THREE.MathUtils.randFloatSpread(10), THREE.MathUtils.randFloatSpread(10), 0], [])
    const [position] = useState(() => new THREE.Vector3())
    const [dragging, drag] = useState(false)
    useFrame((state, delta) => {
        // api.current?.applyImpulse(vec.copy(api.current.translation()).negate().multiplyScalar(scale * scale))
        easing.damp3(position, [state.pointer.x * state.viewport.width / 2 - dragging.x, state.pointer.y * state.viewport.height / 2 - dragging.y, 0], 0.2, delta)
        api.current?.setNextKinematicTranslation(position)
    })
    return (
        // <RigidBody ref={api} type={dragging ? "kinematicPosition" : "dynamic"} enabledRotations={[false, false, false]} enabledTranslations={[true, true, false]} linearDamping={4} angularDamping={1} friction={0.1} position={initialPos} scale={scale} colliders={false} gravityScale={scale / 3} >
        <RigidBody ref={api} type={dragging ? "kinematicPosition" : "dynamic"} enabledRotations={[false, false, false]} enabledTranslations={[true, true, false]} linearDamping={4} angularDamping={1} friction={0.1} position={[0,0,0]}  colliders={false} gravityScale={radius / 130} >
            <BallCollider  args={[radius  +0.3]} />
            <Float speed={25}>
                <mesh
                    onPointerDown={e => (e.target.setPointerCapture(e.pointerId), drag(new THREE.Vector3().copy(e.point).sub(api.current.translation())))}
                    onPointerUp={e => (e.target.releasePointerCapture(e.pointerId), drag(false))}
                    >
                    <circleGeometry args={[radius, 64]} />
                    <meshBasicMaterial {...props} />
                    {text && <Text font="Inter-Regular.woff" letterSpacing={-0.05} position={[0, 0, 0.01]} fontSize={0.425} material-toneMapped={false}>{text}</Text>}
                </mesh>
                <mesh scale={0.95} position={[0, 0, 0.01]}>
                    <ringGeometry args={[0.9, 1, 64]} />
                    <meshBasicMaterial color={dragging ? "orange" : "black"} />
                </mesh>
                <Image position={[0, 0.45, 0.01]} scale={0.5} transparent toneMapped={false} url={image} />
            </Float>
        </RigidBody>
    )
}

also this wrap my walls and my world

                <Physics debug interpolate timeStep={1 / 60} gravity={[(size.width /2)*10, size.height *10, 0]}>
                    <Perf position="top-left"/>
                    <BorderWalls />
                        <CuboidCollider args={[10, 2, 0.5]} position={[2, 1, 0]} />
                    </RigidBody> */}

                    {dataReady && data.map((props, i) => <Sphere key={i} {...props} />)}
                </Physics>
    </>