Pong Phaser.js collision

I have completed Codecadamy Javascript and Phaser courses.

I want to make pong for my first project.

I have created the paddels and ball. I have got the ball moving. Added collision to the edge of the game world but I cannot get collision working on the ball and the paddle and I have no idea what I am doing wrong. When I add collision the game just freezes. All advice is welcome.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Pong!</title>
    <script src="phaser.js"> </script>
    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
</head>

<body>
    <script type="text/javascript">
        const config = {
            type: Phaser.AUTO,
            width: 1000,
            height: 600,
            physics: {
                default: 'arcade',
                arcade: {
                    enableBody: true
                }
            },
            scene: {
                preload: preload,
                create: create,
                update: update
            }
        }

        const game = new Phaser.Game(config);

        function preload() {
            this.load.image('paddle', 'assets/pong.png');
            this.load.image('cpu', 'assets/pong.png');
            this.load.image('ball', 'assets/ball.png');

        }
        //Storage state
        const gameState = {};

        function create() {
            // Here are the interacable objects
            gameState.cpu = this.physics.add.image(20, 300, 'cpu').setScale(.6);
            gameState.paddle = this.physics.add.image(980, 300, 'paddle').setScale(.6)
            gameState.ball = this.physics.add.image(500, 300, 'ball').setScale(1.4)
            
            //ball
            

            //movement and collision
           
          // The next line is causing the problem!
            //this.physics.add.collider(this.ball, this.paddle);
            
            gameState.cursors = this.input.keyboard.createCursorKeys();
            gameState.paddle.setCollideWorldBounds(true);
            gameState.cpu.setCollideWorldBounds(true);
            gameState.ball.setCollideWorldBounds(true);
            
        }

        function update() {

            gameState.ball.x += 5;
            

            if (gameState.cursors.up.isDown) {
                gameState.paddle.setVelocityY(-160);
            } else if (gameState.cursors.down.isDown) {
                gameState.paddle.setVelocityY(160);
            } else {
                gameState.paddle.setVelocityY(0);
            }
        }
    </script>
</body>

</html>