How to svg scroll animation with react typescript(.tsx)

Question

This is the result I want

svg scroll animation page

svg example

there is a way to do it with HTML and JavaScript But there is no way to do react typescript and I use mui and found useScrollTrigger but I don't know how to draw a line as the scroll goes down

    export default function Home() {
  // interface UseScrollTriggerOptions {
  //   disableHysteresis?: boolean;
  //   target?: Node | Window;
  //   threshold?: number;
  // }

  const ref = useRef(null);
  const scrollTrigger = useScrollTrigger();
  return (
    <>
     <Container
            sx={{
              height: '2500px',
              bgcolor: 'black',
              fontFamily: 'Nanum Gothic',
              color: '#fff',
            }}
          >
            <Box>Hello Home!</Box>
    
            <Grow className='path1' mountOnEnter in={scrollTrigger} timeout={1000}>
              <img src={practiceSvg} stroke-dasharray='50' />
            </Grow>

     {/* <Box component='svg' 
            sx={{
              fill: (theme: Theme) => theme.palette.common.white,
              stroke: (theme) => theme.palette.divider,
              strokeWidth: 1,
            }}
            points='0,100 50,00, 100,100'
          />
        </Box> */}