ติดปัญหาเกี่ยวกับการกด setMute video ในภาษา react.js

import React, { useState, useEffect } from "react";
import Video from './Video';
import Navbar from './Navbar';
import './navbar.css';

function App() {
  const [videos, setVideos] = useState([]);
  
  return (
    <div className="grid row rowx h-100 content">
      <Navbar/>
      {
        videos.map((video) => {
          return (
            <Video
              ID={video.ID}
              source={video.source}
            />
          )
        })
      }
    </div >
  );
}

export default App;

import React, { useState } from 'react'
import VolumeUpIcon from '@material-ui/icons/VolumeUp';
import './navbar.css';
export default function Navbar() {
    const [volum, setVolum] = useState(false);
    const [muted, setMuted] = useState(false);
    const handleFullscreen = event => {
        if (muted === true) {
            setMuted(false);
            setVolum(false);
        } else {
            setMuted(true);
            setVolum(true);
        }
    };
    return (
        <div className="navbar filter-button-group ">
            <VolumeUpIcon className="volumicon" id="mut1" onClick={handleFullscreen} />
        </div>
    )

}

import React, { useRef, useState, useEffect } from 'react';
function Video({ ID, source}) {
    const videoRef = useRef(null);

    return (
        <div className="grid-item col-12 fullcard item_content bike section_tv">
            <div className="d-flex align-items-end flex-column w-100 h-100">
                <video
                    className="position-absolute section-background video"
                    autoPlay
                    preload={preload}
                    muted={muted}
                    loop
                    ref={videoRef}
                    src={source}>
                </video>
            </div>
        </div>
    )
}

export default Video;