Component not updating when useMemo value changes

Question

I try to get the <ReactWebChat/> Component working. It seems like <ReactWebChat /> doesn't get re-rendered, when directline is getting updated. When I change revalidateOnFocus to true and re-focus, my chatbot gets rendererd otherwise I'm getting the error Taking longer than usual to connect. Any ideas why?

Here is my code:

const fetcher = (url: string) => axios.get(url).then(res => res.data.token)

export default function Home() {
    const { data: token, isValidating, error } = useSWR("/api/generate-dl-token", fetcher, {revalidateOnFocus: false});

    const directLine = useMemo(() => {
        console.log('Creating directLine with token:', token);
        return createDirectLine({ token });
    }, [token]);


    if (error) return <>Error: Couldn't fetch token.</>;
    if (isValidating) return <>Loading...</>;


    return <ReactWebChat directLine={directLine} locale='en-US' username='custom-user' userID={uuidv4()} />
}