Cannot access control values in a button control onClick event

[caseymilne]

I am using a button control to begin a tennis shot simulation and in the onClick, I cannot seem to access the values from the other controls which are supposed to set parameters for the shot. I am using arrow functions everywhere and yet the values for the controls seem to be out of scope. Is there such a thing as a getValue() function available, or a way to keep the other controls value in scope during onClick?

import { useRef, useEffect, useState } from 'react'
import { useFrame } from '@react-three/fiber'
import { Line } from '@react-three/drei'
import { RigidBody } from "@react-three/rapier";
import { useControl } from 'react-three-gui';

export default function Animation() {

    const shotDirectionControl = useControl('Shot Direction', {
      type: 'number',
        value: 0,
        min: -0.75,
        max: 0.75,
    });

    const aShot = ( e ) => {

                 // EXPECTING shotDirectionControl to be set here and it is when called directly, but it is not when called by onClick from GUI button.

        makeBouncy = true

        if(ball.current && !shooting) {
            const shotHeightForce = shotHeightControl + forceRandomizer( 10, .01 );
            const shotLengthForce = shotStrengthControl + forceRandomizer( 10, .01 );
            ball.current.applyImpulse({ x: shotLengthForce, y: shotHeightForce, z: shotDirectionControl }, true);
            shooting = true
            setTimeout(() => { shooting = false }, 1000)
        }

    }

    const shotAControl = useControl('Shot A', {
      type: 'button',
        onClick: (e) => aShot() // ONCLICK CALLED HERE
    });

    let makeBouncy = false

    useEffect(() => {
        ball.current.setLinearDamping(0.5)
    ball.current.setAngularDamping(1.0);
    }, [])

    const ball = useRef(null);

    let shooting = false

    function forceRandomizer( max, multiplier ) {
        return  multiplier * (Math.floor(Math.random() * max))
    }

    return (
        <group>
            <RigidBody
                ref={ball}
                type="dynamic"
                colliders="ball"
                mass="0.056"
                position={[-11.86,0.1,0.15]}
                onCollisionEnter={({ manifold, target, other }) => {
                    if( makeBouncy == true ) {
                        target.rigidBody.gravityScale(0)
                        target.rigidBody.applyImpulse({ x: 0, y:0.8, z: 0 }, true);
                        target.rigidBody.setLinearDamping(5)
                        makeBouncy = false
                    }
                }}
                onCollisionExit={({ manifold, target, other }) => {
                    setTimeout(() => {
                        target.rigidBody.gravityScale(1)
                        target.rigidBody.setLinearDamping(0.5)
                    },100)
                }}
            >
                <mesh scale={[0.2, 0.2, 0.2]} onClick={bShot}>
                    <sphereGeometry args={[0.5,16,16]} />
                    <meshStandardMaterial color='yellow' />
                </mesh>
            </RigidBody>
            <Line className="center-line" points={[[-6.4, 0, 0], [6.4, 0, 0]]} color="white" lineWidth="3" />
            <Line className="service-line-east" points={[[-6.4, 0, -4.115], [-6.4, 0, 4.115]]} color="white" lineWidth="3" />
            <Line className="service-line-west" points={[[6.4, 0, -4.115], [6.4, 0, 4.115]]} color="white" lineWidth="3" />
            <Line className="back-line-east" points={[[11.885, 0, -4.115], [11.885, 0, 4.115]]} color="white" lineWidth="3" />
            <Line className="back-line-west" points={[[-11.885, 0, -4.115], [-11.885, 0, 4.115]]} color="white" lineWidth="3" />
            <Line className="single-sideline-north" points={[[-11.885, 0, -4.115], [11.885, 0, -4.115]]} color="white" lineWidth="3" />
            <Line className="single-sideline-south" points={[[-11.885, 0, 4.115], [11.885, 0, 4.115]]} color="white" lineWidth="3" />
            <Line className="service-marker-east" points={[[-11.885, 0, 0], [-11.685, 0, 0]]} color="white" lineWidth="5" />
            <Line className="service-marker-west" points={[[11.885, 0, 0], [11.685, 0, 0]]} color="white" lineWidth="5" />
        </group>
  )

}