Click event not working when using arrow functions (jQuery) [duplicate]

I want to add a class to an <h1> element when I click on it. I am using an arrow function, but it is not working.

Here is my code:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>
        <link rel="stylesheet" href="css/style.css">
        <title>Test</title>
    </head>
    <body>
        <h1>Click me!</h1>
        <script src="js/script.js"></script>
    </body>
</html>
$(document).ready(start)

function start(){
    $('h1').click(()=>{
        $(this).toggleClass('h1-click')
    })
}