Unable to pause/freeze Chrome Debugger when using input type='date'?

Question

i want to pause and inspect over the hovering date picker but I'm not able to pause the debugger and inspect over it.

this is the component code.

import React from "react";
import styled from "styled-components";

interface DatePickerProps {
    value?: Date;
    onChange?: (value: Date) => void;
    disabled?: boolean;
    className?: string;
  }
  

  
export const DatePicker = (props: DatePickerProps) => {
    const { onChange, disabled, className, value } = props
    const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(value);

    const handleDateChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const newDate = new Date(event.target.value);
        setSelectedDate(newDate);
        onChange && onChange(newDate);
    };
  
    return (
        <DatePickerWrapper className={className} disabled={disabled}>
            <DatePickerIcon className="far fa-calendar-alt" />
            <Input
                type="date"
                value={selectedDate?.toISOString().slice(0, 10)}
                onChange={handleDateChange}
                disabled={disabled}
                min={new Date().toISOString().slice(0, 10)}
  
            />
        </DatePickerWrapper>
    );
};
  
const DatePickerWrapper = styled.div<DatePickerProps>`
    display: flex;
    align-items: center;
    border: 1px solid gray;
    padding: 8px;
    border-radius: 4px;
    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};
    opacity: ${(props) => (props.disabled ? 0.5 : 1)};
    transition: all 0.2s ease-in-out;
    background-color: #1c1c1c;
  
    &:hover {
      border-color: #2196f3;
    }
  `;
  
const Input = styled.input`
    border: none;
    font-size: 16px;
    width: 100%;
    background-color: transparent;
    color: white;
  
    &::-webkit-calendar-picker-indicator {
      filter: invert(1);
    }
  
    &:focus {
      outline: none;
    }
  `;
  
const DatePickerIcon = styled.i`
    font-size: 16px;
    color: gray;
    margin-right: 8px;
    filter: invert(1);
  `;

can someone help me inspect over it.

normally, opening devtools -> sources -> f8 should work but over here it doesn't.

for context, I'm able to f8 and freeze when this the datepicker isn't open. it's an issue only when it's open :(

Freeze screen in chrome debugger / DevTools panel for popover inspection?

referring to this answer for freezing ^