Can't keep the camera zoomed in when clicking on other elements outside the canvas

[AhmedMuhsingez]

So I'm trying to create a color picker that would change the color of an object I have, and I did it, and it's working as it should, but the problem is that whenever I click on the color picker that i put out side the component of the canvas, the camera loses its zoom (using Bounds from react-three/drei to fit the object inside the window and let the camera focus on that only.)

function SelectToZoom({ children }: Props) { const api = useBounds(); return ( <group onClick={(e) => ( e.stopPropagation(), e.delta <= 2 && api.refresh(e.object).fit() // onPointerMissed={(e) => e.button === 0 && api.refresh().fit()} )} > {children} </group> ); }
...
Inside the canvas:

<Bounds fit clip observe margin={1.9} damping={6}> <SelectToZoom> <CarJSX newColor={props.color} /> </SelectToZoom> </Bounds>

Is there any way to prevent the camera from setting when I click on the color picker?

[AhmedMuhsingez]

Fixed it by simply removing {fit} property from the Bounds component :)