Controller.js

import ScreenSelect from './ScreenSelect'
import video_btn from '../../videobtn.png'
import speaker_btn from '../../speakerbtn.png'
import mic_btn from '../../micbtn.png'
const Controller = () => {
  return (
    <div className="container">
      <div className="row">
        <div
          className="col d-flex justify-content-center"
          style={{ backgroundColor: '#C4C4C4' }}
        >
          <div className="col d-flex justify-content-center">
            <button type="button" className="btn">
              <img src={mic_btn} width="45" height="40" />
            </button>
          </div>
          <div className="col d-flex justify-content-center">
            <button type="button" className="btn">
              <img src={speaker_btn} width="45" />
            </button>
          </div>
          <div className="col d-flex justify-content-center">
            <button
              type="button"
              className="btn"
              data-bs-toggle="modal"
              data-bs-target="#exampleModal"
              src={video_btn}
              onClick="location.href='ScreenSelect.js'"
            >
              <img src={video_btn} width="45" />
            </button>
          </div>
        </div>
        <ScreenSelect />
      </div>
    </div>
  )
}

export default Controller