I had created a animation ui in separate component, i have to send data for both css(animation time),jsx and i have to use that component twice, in my parent component.how can i achieve this?

i tried to send the data as props, but i displays the same data. how do i achieve this with same
component and i don’t know how to send data for animation, the code for animation is given below

const Education = () => {

  const circleprops = {
    collegepercents :'65',
    hscpercent:'80'
    
  }

  return (
    <><div>
      <Circlebar circleprops={circleprops.collegepercents}/>
      <div>
        <h1>Veltech Engineering college</h1>
        <h2>Bachelor of Engineering - Mechanical Engineering</h2>
        <h3>CGPA - 6.5</h3>
      </div>
      {<Circlebar circleprops={circleprops}/> }
      </div>
    </>
  )
}


css:

@keyframes animate {
    
    100%{
      stroke-dashoffset:300;
    }
  }