Wrong intersects faceIndex or doesn't refreshr

Questions
1

Hi,

I have issue with correct number of selected shape. If I put the cursor closer to shape line I have number from adjacent plane or value is not refresh. Do you have any idea what is wrong with my code.

const scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff); // Setting the background color to white
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
//##

//##
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Creating cylinder geometry
const radiusTop = 1;
const radiusBottom = 1;
const height = 2;
const radialSegments = 8;
const heightSegments = 1;
const geometry = new THREE.CylinderGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments);

// Setting the material to gray color
const material = new THREE.MeshBasicMaterial({ color: 0x888888 });
// Creating the cylinder from geometry and material
const cylinder = new THREE.Mesh(geometry, material);
scene.add(cylinder);

// Storing cylinder elements in one object
const cylinderElements = new THREE.Group();
cylinderElements.add(cylinder);

// Creating grid lines for the sides of the cylinder
const edgesGeometry = new THREE.EdgesGeometry(geometry);
const edgesMaterial = new THREE.LineBasicMaterial({ color: 0xffffff });
const edges = new THREE.LineSegments(edgesGeometry, edgesMaterial);
cylinderElements.add(edges);

// Creating grid lines for the top end of the cylinder
const topCircleGeometry = new THREE.CircleGeometry(radiusTop, radialSegments);
const topCircle = new THREE.LineLoop(topCircleGeometry, edgesMaterial);
topCircle.rotation.x = -Math.PI / 2;
topCircle.position.y = height / 2;
cylinderElements.add(topCircle);

// Creating grid lines for the bottom end of the cylinder
const bottomCircleGeometry = new THREE.CircleGeometry(radiusBottom, radialSegments);
const bottomCircle = new THREE.LineLoop(bottomCircleGeometry, edgesMaterial);
bottomCircle.rotation.x = -Math.PI / 2;
bottomCircle.position.y = -height / 2;
cylinderElements.add(bottomCircle);

const middleCircleGeometry = new THREE.CircleGeometry(radiusTop, radialSegments);
const middleCircle = new THREE.LineLoop(middleCircleGeometry, edgesMaterial);
middleCircle.rotation.x = -Math.PI / 2;
middleCircle.position.y = 0; // Center of height
cylinderElements.add(middleCircle);

// Setting the position of the cylinder
cylinderElements.position.set(0, 0, 0);
scene.add(cylinderElements);

// Setting the position of the camera
camera.position.z = 6;

// Rendering function
function render() {
    renderer.render(scene, camera);
}

// Handling cylinder rotation with the mouse
let isMouseDown = false;
let previousMousePosition = { x: 0, y: 0 };

document.addEventListener('mousedown', (event) => {
    isMouseDown = true;
    previousMousePosition = { x: event.clientX, y: event.clientY };
});

document.addEventListener('mouseup', () => {
    isMouseDown = false;
});

document.addEventListener('mousemove', (event) => {
    if (isMouseDown) {
        const deltaMove = {
            x: event.clientX - previousMousePosition.x,
            y: event.clientY - previousMousePosition.y,
        };

        cylinderElements.rotation.x += deltaMove.y * 0.01;
        cylinderElements.rotation.y += deltaMove.x * 0.01;

        render();
    }

    previousMousePosition = { x: event.clientX, y: event.clientY };
    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();

    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);

    const intersects = raycaster.intersectObject(cylinder, true);

    if (intersects.length > 0) {
        const faceIndex = intersects[0].faceIndex;
        console.log(faceIndex);
    } else {
        console.log("pass");
    }
});

// Handling clicking on the cylinder's edge
renderer.domElement.addEventListener('click', onClick, false);
function onClick() {

    event.preventDefault();
    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();

    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

    raycaster.setFromCamera(mouse, camera);

    const intersects = raycaster.intersectObject(cylinder, true);

    if (intersects.length > 0) {
        const faceIndex = intersects[0].faceIndex;
        console.log(faceIndex);
    } else {
        console.log("pass");
    }

    render();
};

// Rendering
render();