How to customize chart.js tooltip (react-chartjs-2)?

Question

I need to create a customized external tooltip for my project.

This is how it looks like now >>

2nd image is how it should look like >>

My dataset:

    datasets: [
  //Systolic Avarage Line --------
  {
    label: 'Systolic Avarage Line',
    backgroundColor: 'transparent',
    data: bloodPressureData?.systolicAvarageLine?.data,
    borderWidth: 2,
    borderColor: 'rgb(0,0,0,0.15)',
    pointBorderWidth: 0,
    pointRadius: 1,
    order: 9,
    type: 'line'
  },
  //Diastolic Avarage Line --------
  {
    label: 'Diastolic Avarage Line',
    backgroundColor: 'transparent',
    data: bloodPressureData?.diastolicAvarageLine?.data,
    borderWidth: 2,
    borderColor: 'rgb(0,0,0,0.15)',
    pointBorderWidth: 0,
    pointRadius: 1,
    order: 9,
    type: 'line'
  },
  //Systolic Bar --------
  {
    label: 'Systolic Bar',
    backgroundColor: bloodPressureData?.sysBar?.map((item) => {
      const colorsArr = item?.colors;
      const colorFound = colorsArr?.reduce((prev, current) =>
        +prev?.riskScore > +current?.riskScore ? prev : current
      );
      return colorFound?.color;
    }),
    data: bloodPressureData?.sysBar?.map((v) => [v?.max, v?.min]),
    barThickness: 14,
    maxBarThickness: 14,
    barPercentage: 1,
    categoryPercentage: 1,
    borderRadius: 50,
    order: 2
  },
  //Diastolic Bar --------
  {
    label: 'Diastolic Bar',
    backgroundColor: theme.palette.primary.main,
    data: bloodPressureData?.diaBar?.map((v) => [v?.max, v?.min]),
    barThickness: 14,
    maxBarThickness: 14,
    barPercentage: 1,
    categoryPercentage: 1,
    borderRadius: 50,
    order: 8
  },
  //Systolic Min Scatter --------
  {
    label: 'Systolic Min Scatter',
    backgroundColor: () => {
      const selectedColorArr = bloodPressureData?.sysMin?.colors?.map(
        (item) => {
          const colorObj = item.reduce((prev, current) =>
            +prev?.riskScore > +current?.riskScore ? prev : current
          );
          return colorObj?.color;
        }
      );
      return selectedColorArr;
    },
    data: bloodPressureData?.sysMin?.data,
    pointBorderColor: theme.palette.common.black[700],
    pointBorderWidth: 0,
    pointRadius: 7.5,
    pointHoverRadius: 9,
    order: 1,
    type: 'scatter'
  },
  //Systolic Max Scatter --------
  {
    label: 'Systolic Max Scatter',
    backgroundColor: () => {
      const selectedColorArr = bloodPressureData?.sysMax?.colors?.map(
        (item) => {
          const colorObj = item?.reduce((prev, current) =>
            +prev?.riskScore > +current?.riskScore ? prev : current
          );
          return colorObj?.color;
        }
      );
      return selectedColorArr;
    },
    data: bloodPressureData?.sysMax?.data,
    pointBorderColor: theme.palette.common.black[700],
    pointBorderWidth: 0,
    pointRadius: 7.5,
    pointHoverRadius: 9,
    order: 1,
    type: 'scatter'
  },
  //Diastolic Min Scatter --------
  {
    label: 'Diastolic Min Scatter',
    backgroundColor: theme.palette.primary.main,
    data: bloodPressureData?.diaMin?.data,
    pointBorderColor: theme.palette.common.black[700],
    pointBorderWidth: 0,
    pointRadius: 7.5,
    pointHoverRadius: 9,
    order: 6,
    type: 'scatter'
  },
  //Diastolic Max Scatter --------
  {
    label: 'Diastolic Max Scatter',
    backgroundColor: theme.palette.primary.main,
    data: bloodPressureData?.diaMax?.data,
    pointBorderColor: theme.palette.common.black[700],
    pointBorderWidth: 0,
    pointRadius: 7.5,
    pointHoverRadius: 9,
    order: 7,
    type: 'scatter'
  }
]

And my options.tooltips looks like below:

tooltips: {
  enabled: true,
  callbacks: {
    title: (tooltipItem, data) => {
      if (selectedTimeSpan === TimeSpan.TODAY) {
        return `${data['labels'][tooltipItem[0]['index']]}:00`;
      } else if (selectedTimeSpan === TimeSpan.WEEK) {
        return `${getWeekHoverTitle(
          data['labels'][tooltipItem[0]['index']]
        )} ${moment(selectedDateTime).format('MMMM').slice(0,3)} ${
          data['labels'][tooltipItem[0]['index']]
        }`;
      } else if (selectedTimeSpan === TimeSpan.MONTH) {
        return `${data['labels'][tooltipItem[0]['index']]} ${moment(
          selectedDateTime
        ).format('MMMM')} `;
      } else {
        return `${moment(
          `${data['labels'][tooltipItem[0]['index']]}`,
          'MM'
        ).format('MMMM')}`;
      }
    },
    beforeLabel: function () {
      return `Systolic`;
    },
    label: function (tooltipItem, data) {
      return `${data['datasets'][2]['data'][tooltipItem['index']]} ${measurementValueKey}`;
      // data['datasets'][0]['data'][tooltipItem['index']]
    },
    afterLabel: function (tooltipItem, data) {
      return `${data['datasets'][2]['data'][tooltipItem['index']]} ${measurementValueKey}`;
      // data['datasets'][0]['data'][tooltipItem['index']]
    },
  },
  mode: 'index',
  intersect: false,
  caretSize: 6,
  displayColors: true,
  yPadding: 10,
  xPadding: 20,
  borderWidth: 0,
  bodySpacing: 10,
  titleFontSize: 16,
  backgroundColor: '#6E759F',
  titleFontColor: theme.palette.common.white,
  bodyFontColor: theme.palette.common.white,
  footerFontColor: theme.palette.common.white
},