useBox does not works for sometime after first render

[bhushan6]

I have few rigid boxes in a scene and so I just made a rigid box component and mapping over array of data containing position, rotation and size of these boxes but my player seems to pass through them for few secs after initial render, almost like 30secs or something

this is the box component

import {useBox} from '@react-three/cannon'
import React from 'react'
import * as THREE from "three"

const ColliderBox = ({size, position, rotation}) => {

    const [ref] = useBox(() => ({
        type : "Static",
        args : size ,
        position : position,
        rotation : rotation
    }))

    return (
        <>
            <mesh
                ref={ref} 
                position={position}
                rotation={rotation}
            >
                <boxBufferGeometry args={size} />
                <meshBasicMaterial side ={THREE.DoubleSide} color={"red"} visible={true}/>
            </mesh>
        </>
    )
}

export default ColliderBox

this is parent component of box component

import React, {useMemo} from 'react'
import uuid from 'react-uuid'
import ColliderBox from './ColliderBox'

const wallData = {
    //some position, rotation and size data//
  }

const Collider = ({data}) => {

    const types = Object.keys(data)

    const colliderData = useMemo(() => {
        const tempArr = []
        Object.values(data).forEach((stall, index) => {
            stall.pos.forEach(p => {
                wallData[types[index]].forEach(wall => {
                    const side = Math.sign(p[2])
                    const tempObj = {
                        position : [(p[0] + (wall.x*side))*1.02, 1.5, p[2]+(wall.z*side)],
                        size : wall.s,
                        rotation : wall.r
                    }

                    tempArr.push(tempObj)
                })
            })
        })

        return tempArr
    }, [])

    return (
        <>
        { 
            colliderData.map(collider => {
                return(
                    <ColliderBox
                       key={uuid()}
                       rotation ={[0, collider.rotation, 0]}
                       size={[collider.size, 5, 1]}
                       position={collider.position} />
                )
            })
        }
        </>
    )
}

export default Collider