Date picker input element is not working as expected in ios devices. selects date without user select it manually on click of it

I’m experiencing an issue with a date picker that works as expected on most devices. However, on iOS devices (iPhone), I’m facing two specific problems:

Auto-Fill Without User Confirmation:
When the user clicks on the date picker, the input field is automatically filled with a date (AutoFill is off in ios settings), even if the user hasn’t clicked “Done.” This behavior is unexpected and differs from how the date picker works on other devices.

Date Overlaps with Calendar Icon:
The date value overlaps with the calendar icon within the input field. This overlap makes it difficult for the user to read the selected date clearly.

Here’s a simplified version of my js code:

 <div style="text-align: right; font-weight: bold;" class="sDiv1 date-width-sm">
 <span>text</span>
 <div class="date-width-sm">
     <input class="w-100 names" type="text" id="name" placeholder="">
     <div style="text-align: right; margin-top: 50px; direction: rtl;font-weight:bold;"> <span class="DatePicker">Demo</span></div>
     <div style="margin-top:20px;">
         <input class="textbox dateFilter px-3 py-0 date-picker-height-sm w-100" id="date" placeholder="DD/MM/YYYY" class="textbox" type="date">
     </div>
 </div>

.sDiv1 {
    order: 2;          
}
  .date-width-sm {
      width: 67%;
  }
  .dateFilter {
    border: .1px solid #c5c6c861;
    border-radius: .4rem;
    outline: none;
}

Questions:
1.How can I prevent the date picker on iOS devices from auto-filling the input field without user confirmation?
2.What can I do to stop the date value from overlapping with the calendar icon? Is there a CSS tweak or workaround that can solve this issue?

Any guidance or solutions would be greatly appreciated!