Obtenir une erreur: la fonction n'est pas définie dans React

J'ai fait du code d'animation dans réagir, mais je reçois cette erreur, getkeyframes et gettiming ne définit pas, il y a un problème dans mon code, il ne reçoit pas mon funciton xxx pré>

Ici, j'ai attaché mon article entier que quelqu'un puisse-t-il examiner et m'aider à résoudre ce problème? Toute aide sera vraiment appréciée. P>

import React,{ useRef, useState } from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Redirect,
    withRouter,
    NavLink
} from "react-router-dom";
import ScrollToTop from "./scrollToTop";
import App from "./App";
import { useAuth0 } from "@auth0/auth0-react";
import { useSpring, animated, useTransition } from 'react-spring';
//import { useGesture } from 'react-use-gesture';
import { AnimationSequence, Animatable } from 'react-web-animation';

const LoginButton = () => {
    const { loginWithRedirect, isAuthenticated, isLoading, error } = useAuth0();
    const scrollingLeft = useSpring({
        from: { transform: "translate(60%,0)" },
        to: { transform: "translate(20%,0)" },
        config: { duration: 1000 },
        reset: true
    });

    const scrollingRight = useSpring({
        from: { transform: "translate(-60%,0)" },
        to: { transform: "translate(20%,0)" },
        config: { duration: 1000 },
        reset: true
    });

    const [items, set] = useState([1, 2, 3, 4]);
    const [currentTime,setCurrentTime] = useState('0');
    const [playState,setPlayState] = useState('running');
    const transitions = useTransition(items, item => item.key, {
        from: { transform: 'translate3d(0,-40px,0)' },
        enter: { transform: 'translate3d(0,0px,0)' },
        leave: { transform: 'translate3d(0,-40px,0)' },
    })

    getKeyFrames=() => {
        return [
            { transform: 'scale(1)', opacity: 1, offset: 0 },
            { transform: 'scale(.5)', opacity: 0.5, offset: 0.3 },
            { transform: 'scale(.667)', opacity: 0.667, offset: 0.7875 },
            { transform: 'scale(.6)', opacity: 0.6, offset: 1 },
        ];
    };

    getTiming=(duration) => {
        return {
            duration,
            easing: 'ease-in-out',
            delay: 0,
            iterations: 2,
            direction: 'alternate',
            fill: 'forwards',
        };
    }
    return (
        <Router>
                        <div className="full_width">
                            <AnimationSequence
                                playState={playState}
                                currentTime={currentTime}
                            >
                                <Animatable.div
                                    id="1"
                                    keyframes={this.getKeyFrames()}
                                    timing={this.getTiming(2000)}
                                >
                                    Web Animations API Rocks
                                </Animatable.div>
                                <Animatable.div
                                    id="2"
                                    keyframes={this.getKeyFrames()}
                                    timing={this.getTiming(4000)}
                                >
                                    It really does!
                                </Animatable.div>
                            </AnimationSequence>
                        </div>
        </Router>
    );
};

export default LoginButton;