How to use ::before,::after,ul,li (Pseudo-elements) in react pdf renderer?

I want to use a vertical timeline in react pdf renderer. I read their docs. There are no options to use pseudo elements. It would be really helpful for me to know if there is a way to do this or how to do it using <View> and <Text>.

I want to add this timeline to pdf renderer : https://codepen.io/stoXmod/pen/ZEXwzGP

Here is the code I tried:

import React from 'react';

import { Font, Text, View, StyleSheet } from '@react-pdf/renderer';

import Poppins from './fonts/Poppins/Poppins-SemiBold.ttf';
import Roboto from './fonts/Roboto/Roboto-Regular.ttf';

Font.register({
  family: 'Poppins',
  src: Poppins,
});
Font.register({
  family: 'Roboto',
  src: Roboto,
});

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'stretch',
    padding: '10px 20px 10px 20px',
  },

  //   timeline StyleSheet
  wrapper: {
    display: 'flex',
    maxWidth: '300px',
  },
  steps: {
    maxWidth: '300px',
    margin: '0 auto',
  },
  step: {
    display: 'flex',
    position: 'relative',
    '&::after': {
      content: '',
      position: 'absolute',
      left: '5px',
      top: '32px',
      height: 0,
      width: '2px',
      backgroundColor: '#007ea7',
    },
    '&:not': {
      height: '75%',
    },
  },
  number: {
    position: 'relative',
    top: '13px',
    width: '10px',
    height: '10px',
    backgroundColor: '#000',
    borderRadius: '50%',
    border: '2px solid #007ea7',
    flexShrink: '0',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    color: 'white',
    fontSize: '15px',
    fontWeight: '600',
    marginRight: '14px',
  },
  info: {
    margin: '8px 0 8px',
  },
  title: {
    fontSize: '16px',
    fontWeight: '600',
    margin: '0 0 8px',
    color: '#000',
  },
  text: {
    fontSize: '12px',
    color: '#000',
    paddingBottom: 0,
    margin: 0,
  },
});

const Edexp = () => (
  <>
    <View style={styles.container}>
        <View style={styles.wrapper}>
          <View style={styles.steps}>
            {/* !step */}
            <View style={styles.step}>
              <View style={styles.number}>
                <View style={styles.info}>
                  <Text style={styles.title}>test</Text>
                  <Text style={styles.text}>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Fugiat pariatur minima nemo? Facilis veniam reprehenderit
                    quaerat aspernatur, quis voluptas voluptate.
                  </Text>
                </View>
              </View>
            </View>
            {/* !step */}
            <View style={styles.step}>
              <View style={styles.number}>
                <View style={styles.info}>
                  <Text style={styles.title}>test2</Text>
                  <Text style={styles.text}>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Fugiat pariatur minima nemo? Facilis veniam reprehenderit
                    quaerat aspernatur, quis voluptas voluptate.
                  </Text>
                </View>
              </View>
            </View>
            {/* !step */}
            <View style={styles.step}>
              <View style={styles.number}>
                <View style={styles.info}>
                  <Text style={styles.title}>test 3</Text>
                  <Text style={styles.text}>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Fugiat pariatur minima nemo? Facilis veniam reprehenderit
                    quaerat aspernatur, quis voluptas voluptate.
                  </Text>
                </View>
              </View>
            </View>
          </View>
        </View>
    </View>
  </>
);

export default Edexp;