Can't bind the custom buttons to record or stop recording

[itsahmadawais]

I am trying to add custom buttons and UI to control the camera recording but I could not find the documentation and details on how to do it except rendering the UI.

Do we need to add data-set? Like data-qa to bind the button to start recording? OR I am missing any details?

renderActions={(
          t,
          isVideoInputSupported,
          isInlineRecordingSupported,
          thereWasAnError,
          isRecording,
          isCameraOn,
          streamIsReady,
          isConnecting,
          isRunningCountdown,
          isReplayingVideo,
          countdownTime,
          timeLimit,
          showReplayControls,
          replayVideoAutoplayAndLoopOff,
          useVideoInput,

          onTurnOnCamera,
          onTurnOffCamera,
          onOpenVideoInput,
          onStartRecording,
          onStopRecording,
          onPauseRecording,
          onResumeRecording,
          onStopReplaying,
          onConfirm
        ) => {
          return (
            <div className="video-controls-container">
              <div className="cta-container">
                <div className="flex-container">
                  <InfoPopup />
                  {
                    !isRecording?
                    <button
                    className="btn btn-rounded btn-record" data-qa={'start-recording'} onClick={onStartRecording}
                  ></button>
                  :
                  'Recording'
                  }
                  <button className="btn btn-rounded btn-info btn-cancel">
                    <RxCross2 />
                  </button>
                </div>
              </div>
            </div>
          );
        }}