What ended up working is calculating the new latitude, longitude, and zoom for my new extent I was zooming to using WebMercatorViewport, and then set that as the new viewport state. I used the FlyToInterpolator method that react-map-gl offers to fly to that location.

const {longitude, latitude, zoom } = new WebMercatorViewport(this.state.viewport)
.fitBounds([[extent[0], extent[1]], [extent[2], extent[3]]], {padding: {top: 82, bottom: 30, left: leftPadding, right: 30}});
const viewport = {
  ...this.state.viewport,
  longitude,
  latitude,
  zoom,
  transitionDuration: 2000,
  transitionInterpolator: new FlyToInterpolator()
}
this.setState({viewport});

The input am passing to fitBounds should be in the form of Array<Array<number>>

getMinOrMax(markersObj, minOrMax, latOrLng) {
 if(minOrMax == "max"){
  return _.maxBy(markersObj, function (value) {
      return value[latOrLng]
  })[latOrLng];
 }else{
  return _.minBy(markersObj, function (value) {
      return value[latOrLng]
  })[latOrLng];
 }
}

getBounds(markersObj) {
  var maxLat = this.getMinOrMax(markersObj, "max", "lat");
  var minLat = this.getMinOrMax(markersObj, "min", "lat");
  var maxLng = this.getMinOrMax(markersObj, "max", "lng");
  var minLng = this.getMinOrMax(markersObj, "min", "lng");

  var southWest = [minLng, minLat];
  var northEast = [maxLng, maxLat];
  return [southWest, northEast];
}

So am using the above methods to find figure out SouthWest and NorthEast points from the given array of marker position objects.

Marker sample objects should to be like below:

var markerPoints = [{lng:12.49637,lat:41.90278},{lng:12.319398,lat:45.441906},{lng:13.055054,lat:47.809532},{lng:16.373724,lat:48.208244}]

<Map
  style="mapbox://styles/mapbox/streets-v9"
  containerStyle={{
   height: "100%",
   width: "100%"
  }}
  fitBounds={this.getBounds(markerPoints)}>
  <markers /> 
</Map>  

Note: Am using lodash liblary for utility functions like min and max in the example.

Thanks,
Josan

Got it working like this:

import React, { useState } from "react";
import ReactMapGL, { Marker, WebMercatorViewport } from "react-map-gl";
import * as parkData from "./data.json";
const mapIcon: any = require('../images/mapIcon.png');

const applyToArray = (func, array) => func.apply(Math, array)

const getBoundsForPoints = (points) => {
  console.log('Points:', points)
  // Calculate corner values of bounds
  const pointsLong = points.map(point => point.geometry.coordinates[0])
  const pointsLat = points.map(point => point.geometry.coordinates[1])
  const cornersLongLat = [
    [applyToArray(Math.min, pointsLong), applyToArray(Math.min, pointsLat)],
    [applyToArray(Math.max, pointsLong), applyToArray(Math.max, pointsLat)]
  ]
  // Use WebMercatorViewport to get center longitude/latitude and zoom
  const viewport = new WebMercatorViewport({ width: 600, height: 600 })
    // @ts-ignore
    .fitBounds(cornersLongLat, { padding: {top:150, bottom:200, left:100, right:150} }) 
  const { longitude, latitude, zoom } = viewport
  return { longitude, latitude, zoom }
}

const myMap = () => {

  const bounds = getBoundsForPoints(parkData.features);

  const [viewport, setViewport] = useState({
    width: "100%",
    height: "600px",
    ...bounds
  });
  const [selectedPark, setSelectedPark] = useState(null);
  
  return (
    <div>
      <ReactMapGL
        {...viewport}
        mapboxApiAccessToken="pk.eyJ1IjoiYmVubmtpbmd5IiwiYSI6ImNrY2ozMnJ5dzBrZ28ycnA1b2Vqb2I0bXgifQ.ZOaVtzsDQOrAovh9Orh13Q"
        mapStyle="mapbox://styles/mapbox/streets-v11"
        onViewportChange={viewport => {
          setViewport(viewport);
        }}

      >
        {parkData.features.map(park => (
          <Marker
            key={park.properties.PARK_ID}
            latitude={park.geometry.coordinates[1]}
            longitude={park.geometry.coordinates[0]}
          >
            <button
              className="marker-btn"
              onClick={e => {
                e.preventDefault();
                setSelectedPark(park);
              }}
            >
              <img src={mapIcon} alt="Map Pointer Icon" />
            </button>
          </Marker>
        ))}
      </ReactMapGL>
      {selectedPark ? (
        <div>
          <h2>{selectedPark.properties.NAME}</h2>
          <p>{selectedPark.properties.DESCRIPTIO}</p>
          <button onClick={e => {
                e.preventDefault();
                setSelectedPark(null);
              }}>X</button>
        </div>
      ) : null}
    </div>
  );
}

export default myMap;

If you want to fit map to markers, you can create bounds that contains all markers.

var bounds = new mapboxgl.LngLatBounds();

markers.features.forEach(function(feature) {
    bounds.extend(feature.geometry.coordinates);
});

map.fitBounds(bounds);