change 'Tick' mark of html checkbox with a svg

I am working on a react project and I want to replace the HTML checkmark with an SVG. I have searched but none of the search results helps me to find out what is my problem...

This is my JSX code:

 <Form.Group controlId="preSms" className="mt-2" >
      <Row className="m-0 px-4">
        <Col className="col-1">
           <Form.Check.Input name="1" defaultChecked={orderSms.preSms.status} onChange={handleChange} className="test" type="checkbox" />
           <span className="check"></span>
        </Col>
        <Col className="col-8 text-end">
           <Form.Check.Label htmlFor="preSms">
               <span className="sms-status-label">اس ام اس ثبت سفارش</span>
           </Form.Check.Label>
        </Col>
      </Row>
 </Form.Group>

and my CSS code:

.test {
opacity: 0;
visibility: hidden;
position: absolute;
}

.test:checked ~ .check::after {
  opacity: 1;
  transform: scale(1);
}

.check {
   width: 30px;
   height: 30px;
   border: 1px solid black;
   border-radius: 9px;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   transition: all 0.15s cubic-bezier(0, 1.05, 0.72, 1.07);
  }

 .check::after {
   content: '';
   width: 100%;
   height: 100%;
   opacity: 0;
   position: absolute;
   left: 12px;
   transform: scale(0);
   background-size: 100%;
   background-image: url("../images/tick.svg");
   background-repeat: no-repeat;
   background-position: center;
   transition-delay: 0.2s !important;
   transition: all 0.25s cubic-bezier(0, 1.05, 0.72, 1.07);
   }

what I have to make:

what I have made so far:

codesandbox