React APP ReferenceError: require is not defined - reactjs

Question

Integrating GULP with my React Project. On firing up the project, the following is the error that I face: https://prnt.sc/trw1if
Do check the screenshot above. This is a particular issue that I face.
Do let me know what am I doing wrong here. I've tried different presets for it as well. I am also attaching my GULP file here:
var gulp = require('gulp');
var babel = require('gulp-babel');
var sass = require('gulp-sass');
const imagemin = require('gulp-imagemin');
var concat = require('gulp-concat');
var uglify = require("gulp-uglify");
var browserSync = require("browser-sync").create();
const rollup = require('gulp-better-rollup');
// const babel = require('rollup-plugin-babel');
const resolve = require('rollup-plugin-node-resolve');
const commonjs = require('rollup-plugin-commonjs');
gulp.task('jsCompile', function () {
return gulp.src(['src/*.js', 'src/**/*.js', 'src/**/**/*.js'])
.pipe(babel({
presets: ['#babel/preset-react', '#babel/preset-env']
})
.on('error', function (err) {
console.log('[Compilation Error]');
console.log(err.fileName + (err.loc ? `( ${err.loc.line}, ${err.loc.column} ): ` : ': '));
console.log('error Babel: ' + err.message + '\n');
console.log(err.codeFrame);
this.emit('end');
}))
// .pipe(rollup({ plugins: [babel(), resolve(), commonjs()] }, 'umd'))
.pipe(uglify())
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/js'))
.pipe(browserSync.stream())
});
gulp.task('htmlCompile', function () {
return gulp.src(['public/*.html'])
.pipe(gulp.dest('dist/'))
});
gulp.task('sassCompile', function () {
return gulp.src(['src/*.scss', 'src/*.css'])
.pipe(concat('main.css'))
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('dist/css'))
});
gulp.task('imageCompile', function () {
return gulp.src(['src/assets/images/*.jpg', 'src/assets/images/*.png'])
.pipe(imagemin())
.pipe(gulp.dest('dist/assets'))
});
gulp.task('broswerReload', function () {
browserSync.init(["dist/css/*.css", "dist/js/*.js"], {
server: {
baseDir: "./dist"
}
})
});
gulp.task('serve', gulp.parallel('jsCompile', 'htmlCompile', 'imageCompile', 'broswerReload'), function () {
// gulp.watch(['src/*.scss', 'src/*.css'], ['sassCompile']);
gulp.watch('src/*.js', ['jsCompile']);
gulp.watch(['src/assets/images/*.jpg', 'src/assets/images/*.png'], ['imageCompile']);
gulp.watch('public/*.html', ['htmlCompile'])
// gulp.watch('public/*.html', ['htmlCompile']).on('change', browserSync.reload);
});
gulp.task('default', gulp.series('serve'));