I am trying to change the color of the border line on the hover. when the line is hovered then gray the other dataset color and just show the color of the highlighted dataset border

1- this when the first dataset 1 is hovering other line graph is gray

2- this is when dataset 2 is hovering other line graph is gray

import {
    Chart as ChartJS,
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Legend,
} from 'chart.js';
import { Line } from 'react-chartjs-2';
import faker from 'faker';

export const options = {
    responsive: true,
    interaction: {
        mode: 'dataset',
    },

    plugins: {
        legend: {
            position: 'top',
        },
        title: {
            display: true,
            text: 'Chart.js Line Chart',
        },
    },
};
const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
console.log(labels.map(() => faker.datatype.number({ min: -1000, max: 1000 })));
export const data = {
    labels,
    datasets: [
        {
            label: 'Dataset 1',
            data: [100, -87, 200, 120, 150, 134, 43],
            borderColor: 'rgba(145,147,148,0.7)',
            backgroundColor: 'rgba(255, 99, 132, 0.5)',
            pointHoverBackgroundColor: 'red',
            hoverBorderColor: "red",
            hoverBackgroundColor: "#FC496BFF"
        },
        {
            label: 'Dataset 2',
            data: [20, -357, 5, 10, 131, 134, 43],
            borderColor: 'rgb(252,73,107)',
            hoverBorderColor: "blue",
            backgroundColor: 'rgba(255, 99, 132, 0.5)',
        },

        {
            label: 'Dataset 3',
            data: [30, -197, 25, 139, 96, 134, 43],
            borderColor: 'rgba(145,147,148,0.7)',
            hoverBorderColor: "blue",
            backgroundColor: 'rgba(53, 162, 235, 0.5)',
        },
    ],
};