How to integrate WebcamCapture with another element in React

I’m Trying To Add a background color to my webcam project
But when I add <WebcamCapture /> with

<div
    style={{ backgroundColor: bgcolor, width: "100vw", height: "100vh" }}
    className="App"> it get an error, 

but when I run each one separately it runs (either background becomes blue or the camera without the blue background, I want to have both)

import React, { useState } from 'react';
    

import './App.css';

import WebcamCapture from './Webcam/webcam'

//import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

//import Home from './pages/pagesindex';
//import SigninPage from './pages/signin';








function App() {
  var colors = [
    {
      value: 1,
      label: "blue"
    
    }
  ];
  var [inputValue, setInputValue] = useState(colors[0].label);
  var [bgcolor, setbgColor] = useState(colors[0].label);
  
  return (

     <WebcamCapture />

   <div
    style={{ backgroundColor: bgcolor, width: "100vw", height: "100vh" }}
    className="App"
  >
   
  </div>
   


    
   
  );
}

export default App;

This is how I want it look like