jarv.is/components/Wallpaper/Wallpaper.tsx

import { useEffect, useRef } from "react";
import classNames from "classnames/bind";
import type { ReactNode } from "react";

import styles from "./Wallpaper.module.css";
const cx = classNames.bind(styles);

type Props = {
  image: string;
  tile?: boolean;
  className?: string;
  children: ReactNode;
};

const Wallpaper = ({ image, tile, className, ...rest }: Props) => {
  const bgRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    bgRef.current.style.backgroundImage = `url(${image})`;
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  return <div ref={bgRef} className={cx(styles.wallpaper, { tile: !!tile }, className)} {...rest} />;
};

export default Wallpaper;