Filling screen with background on mobile

I am trying to create a website mostly focused on mobile. I would like to make the website fill the screen size. Currently, I am using the hook

const getWindowDimensions = () => {
    const { innerWidth: width, innerHeight: height } = window;
    return {
        width,
        height
    };
};

export const useWindowDimensions = () => {
    const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());

    useEffect(() => {
        function handleResize() {
            setWindowDimensions(getWindowDimensions());
        }

        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []);

    return windowDimensions;
};

and pass the height and width values to the main App's component through style

<div
            style={{
                backgroundImage: `url(${background})`,
                height,
                width,
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat',
                backgroundSize: 'cover',
                position: 'absolute'
            }}
        >

as the wrapper of all components, but it seems to be not matching it perfectly. Do you know how to fix it?