Why do the image elements in my table shrink on hover/active/focus?

Question

Normal state When hovering over the search icon and thus expanding the searchbar When clicking on the filter icon and thus expanding the filter block

As I got a problem regarding the shrinking of elements in the upper left cell of the table and can't figure out why, I thought I will post my question on Stackoverflow. I am trying to create a table in which a user can filter/find a specific event in the table by using the searchbar or the filter functionality (which is not finished yet). However, currently I have the problem that the filter icon will shrink when I hover over the search icon and both icons shrink when i click on the filter icon. I'm not sure why this is happening. I gave both the searchbar and filter block a 100% width which should take up 100% of the width that is available (without pushing elements out of the table cell's border, but it seems like the icons shrink to make sure it all fits inside the cell. However if I put the width of the searchbar and/or filter div to something else like 50 or 75% the icons will still shrink. Can anyone see why? The code below is Next.js with Tailwind:

<table className=''>
                <thead>
                  <tr className='[&>*]:text-xs [&>*]:border-1 [&>*]:border-black'>
                    <th className='w-full'>
                      <div className='flex items-center'>
                        <div className='flex items-center group w-fit sm:w-full'>
                          <input
                            type='search'
                            placeholder='Zoeken...'
                            className='shadow-lighterAlt w-0 group-hover:w-full active:w-full focus:w-full group-hover:p-1 active:p-1 focus:p-1 transition-width duration-500 ease-in-out z-10 focus:outline-0 rounded-md group-hover:-mr-4 active:-mr-4 focus:-mr-4 sm:group-hover:w-1/3 sm:active:w-1/3 sm:focus:w-1/3 lg:group-hover:w-72 lg:active:w-72 lg:focus:w-72'
                            onKeyUp={(e) => {
                              {
                                e.target.value.length === 0
                                  ? setSearchResults(events)
                                  : setSearchResults(findEvent(e.target.value))
                              }
                              console.log(findEvent(e.target.value))
                              console.log(events)
                            }}
                          />
                          <Image
                            src={searchIcon}
                            alt='Zoek icoon'
                            className='bg-red-breda rounded-md p-1 z-10 shadow-lighterAlt'
                            width='25'
                            height='25'
                          />
                        </div>
                        <button
                          type='button'
                          className='flex items-center group w-fit active:w-full focus:w-full'
                        >
                          <Image
                            src={filterIcon}
                            alt='Filter icoon'
                            className='bg-red-breda rounded-md ml-1 p-1 z-10 shadow-lighterAlt'
                            width='25'
                            height='25'
                          />
                          <div className='z-10 hidden group-active:flex group-focus:flex bg-red-breda w-full text-white -ml-0.5 p-1 group-active:p-1 group-focus:p-1 rounded-r-md'>
                            Filters
                          </div>
                        </button>
                        {/*<span className='absolute left-20'>Naam</span>*/}
                      </div>
                    </th>
                    <th className='whitespace-nowrap'>Start en einddatum</th>
                  </tr>
                </thead>
                <tbody>
                  {searchResults.map((event) => {
                    return (
                      <tr
                        key={event._id}
                        className='[&>*]:text-xs [&>*]:border-1 [&>*]:border-black'
                      >
                        <td>
                          <div className='flex flex-col'>
                            <span>{event.name}</span>
                            <span>
                              {event.startTime ? convertDateTime(event.startTime) : ''}
                              {event.startTime && ' - '}
                              {event.startTime ? convertDateTime(event.startTime) : ''}
                            </span>
                          </div>
                        </td>
                        <td>
                          <div className='flex justify-center items-center [&>*]:mx-2'>
                            <button
                              type='button'
                              className='flex items-center group w-fit active:w-full focus:w-full relative'
                            >
                              <Image
                                src={infoIcon}
                                alt='Info icoon'
                                className=''
                                width='20'
                                height='20'
                              />
                              <div className='z-10 hidden group-active:flex group-focus:flex bg-red-breda text-white -ml-0.5 p-1 group-active:p-1 group-focus:p-1 rounded-r-md absolute w-fit -top-10 -left-4'>
                                Event Info
                              </div>
                            </button>
                            <label className='relative inline-flex items-center mr-5 cursor-pointer'>
                              <input
                                type='checkbox'
                                value=''
                                className='sr-only peer'
                                checked={eventAuth}
                                onClick={() => toggleEventAuth(!eventAuth)}
                              />
                              <div className="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-red-300 dark:peer-focus:ring-red-800 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-red-breda"></div>
                            </label>
                          </div>
                        </td>
                      </tr>
                    )
                  })}
                </tbody>
              </table>

I have tried to give the searchbar and filter div several heights, like w-full, w-1/2, w-2/3 and w-3/4. I have tried to put those elements height to full (h-full), I have tried to put those elements minimum height to full (m-h-full) and I have tried to take away the padding from for example the filter div to see if the elements still shrink if the filters div's height does not take up the full cell's height (the shrinking happens either way).