using jquery and sticky-kit in gatsby/react

Question

i found a post here showing me how to use jquery with gatsby and that works fine. Now my main problem is using sticky kit, a jquery plugin and i am getting the error "$(...).stick_in_parent is not a function", i have checked all possible documentations and web forums but i cant seem to get this to work. heres my code for using jquery and sticky-kit in gatsby:

const React = require("react")

export const onRenderBody = ({ setHeadComponents }, pluginOptions) => {
    setHeadComponents([
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>,
        <script src="js/animsition/jquery.animsition.min.js"></script>,
        <script src="https://cdnjs.cloudflare.com/ajax/libs/sticky-kit/1.1.3/sticky-kit.min.js" integrity="sha512-MAhdSIQcK5z9i33WN0KzveJUhM2852CJ1lJp4o60cXhQT20Y3friVRdeZ5TEWz4Pi+nvaQqnIqWJJw4HVTKg1Q==" crossorigin="anonymous"></script>
    ])
}

heres the code implementing the two:

 function activeStickyKit() {
            $('.sticky-column').stick_in_parent({
                parent: '.sticky-parent'
            });

            // bootstrap col position
            $('.sticky-column')
                .on('sticky_kit:bottom', function(e) {
                    $(this).parent().css('position', 'static');
                })
                .on('sticky_kit:unbottom', function(e) {
                    $(this).parent().css('position', 'relative');
                });
        };
        activeStickyKit();

        function detachStickyKit() {
            $('.sticky-column').trigger("sticky_kit:detach");
        };

        //  stop sticky kit
        //  based on your window width

        var screen = 1200;

        var windowHeight, windowWidth;
        windowWidth = $(window).width();
        if ((windowWidth < screen)) {
            detachStickyKit();
        } else {
            activeStickyKit();
        }

        // windowSize
        // window resize
        function windowSize() {
            windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
            windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
        }
        windowSize();

        function debounce(func, wait, immediate) {
            var timeout;
            return function() {
                var context = this, args = arguments;
                var later = function() {
                    timeout = null;
                    if (!immediate) func.apply(context, args);
                };
                var callNow = immediate && !timeout;
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
                if (callNow) func.apply(context, args);
            };
        };

        $(window).resize(debounce(function(){
            windowSize();
            $(document.body).trigger("sticky_kit:recalc");
            if (windowWidth < screen) {
                detachStickyKit();
            } else {
                activeStickyKit();
            }
        }, 250));

the code above is placed in the gatsby-browser.js file

Please any insight will be of assistance!. Thanks