Next.jsでStateを変更してもClassNameが変わらない

前提・実現したいこと

Next.jsを利用し、動画再生サイトを作成しています。
自作のhooksを利用しStateを管理、hooksの値によりClassNameを変更したいのですが書き換わりません。
どのようにすればStateにより変更することができるのでしょうか？

該当のソースコード

Next.js
1[use-video.js]
2import { createContext, useContext, useState } from "react";
3
4export const VideoProvider = (props) => {
5    const video = useProvideVideo(VideoContext);
6
7    return (
8        <VideoContext.Provider value={video}>
9            {props.children}
10        </VideoContext.Provider>
11    );
12};
13export const useVideo = () => {
14    return useContext(VideoContext);
15};
16
17const useProvideVideo = () => {
18    const [test, setTest] = useState(true);
19
20    return {
21        test,
22        setTest,
23    }
24}

Next.js
1[Player.js]
2    return (
3        <VideoProvider>
4            <VideoPlayer video={data} />
5        </VideoProvider>
6    );

Next.js
1export const VideoPlayer = (props) => {
2    const context = useVideo();
3
4    return (
5        <ReactPlayer
6            url={props.video.url}
7            className={
8                context.test
9                    ? "hogehoge"
10                    : "mogemgoe"
11            }
12            onClick={() => {
13                context.setTest(false);
14            }}
15        />
16    );
17}