custom y axis with react-chartjs-2 library and typscript

Question

I am trying to do up a custom y-axis to convert 1 to a custom string. E.g. 1 is "Apple"

Been trying different solutions and none seems to work for the "scales" option. I doing its on react typescript.

Also, I am very confused about whether to use [], "y", "yAxis" or "yAxes".

const opt = {
    plugins: {
        legend: {
            display: false,
            labels: {
                color: 'rgb(255, 99, 132)'
            }
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: false,
                    min: 0,
                    stepSize: 2,
                    callback: function(value : any) {
                        return `${value}`
                    }
                }
            }]           
        }
    }
}

return (
    <div>
        <Bar
            data={state}

            options={opt}
            
    />
    </div>
)

Example of the current problem